ng2-date-picker-pda-forked/prebuild/app/day-calendar/day-calendar.component.less

@import '../common/styles/variables';

& {
  dp-day-calendar {
    display: inline-block;

    .dp-day-calendar-container {
      background: @c-white;
    }

    .dp-calendar-wrapper {
      box-sizing: border-box;
      border: 1px solid @c-black;

      .dp-calendar-weekday:first-child {
        border-left: none;
      }
    }

    .dp-weekdays {
      font-size: 15px;
      margin-bottom: 5px;
    }

    .dp-calendar-weekday {
      box-sizing: border-box;
      display: inline-block;
      width: @basic-height;
      text-align: center;
      border-left: 1px solid @c-black;
      border-bottom: 1px solid @c-black;
    }

    .dp-calendar-day {
      box-sizing: border-box;
      width: @basic-height;
      height: @basic-height;
      cursor: pointer;
    }

    .dp-selected {
      background: @c-primary;
      color: @c-white;
    }

    .dp-prev-month, .dp-next-month {
      opacity: 0.5;
    }

    .dp-hide-near-month {
      .dp-prev-month, .dp-next-month {
        visibility: hidden;
      }
    }

    .dp-week-number {
      position: absolute;
      font-size: 9px;
    }

    &.dp-material {

      .dp-calendar-weekday {
        height: @basic-height - 5px;
        width: @basic-height;
        line-height: @basic-height - 5px;
        color: darken(@c-light-gray, 40%);
        border: none;
      }

      .dp-calendar-wrapper {
        border: 1px solid @c-light-gray;
      }

      .dp-calendar-month,
      .dp-calendar-day {
        box-sizing: border-box;
        background: @c-white;
        border-radius: 50%;
        border: none;
        outline: none;

        &:hover {
          background: @c-light-gray;
        }
      }

      .dp-selected {
        background: @c-primary;
        color: @c-white;

        &:hover {
          background: @c-primary;
        }
      }

      .dp-current-day {
        border: 1px solid @c-primary;
      }
    }
  }
}