@import '../style/theme/color';
@import '../style/theme/shadow';
@import '../style/theme/corner';
@import '../style/core/_font';
@import '../style/core/animation';

.devui-date-header {
  height: 38px;
}

.devui-month-view {
  background-color: $devui-connected-overlay-bg;
  font-size: $devui-font-size;
  width: 240px;
  text-align: center;
  box-shadow: $devui-shadow-length-connected-overlay $devui-shadow;
  border-radius: $devui-border-radius;
  position: relative;
}

.devui-month-view .devui-month-view-table {
  margin-bottom: 0;
  background: $devui-connected-overlay-bg;
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}

.devui-month-view .devui-date-title {
  font-weight: bold;
  cursor: pointer;
  font-size: $devui-font-size;

  &:hover {
    color: $devui-brand-hover;
  }
}

.devui-month-view .devui-btn-link {
  text-decoration: none;
  cursor: pointer;
  display: block;

  &.devui-year-month-disabled {
    cursor: not-allowed;

    svg path,
    svg polygon {
      fill: $devui-disabled-text;
    }
  }

  svg path,
  svg polygon {
    fill: $devui-text-weak;
  }

  &:not(.devui-year-month-disabled):hover {
    svg {
      path,
      polygon {
        fill: $devui-icon-fill-active-hover;
      }
    }
  }
}

.devui-month-view .date-select {
  border: none;
  background: transparent;
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.devui-month-view .devui-week-header {
  cursor: default;
  margin-bottom: 16px;
}

.devui-month-view .devui-week-header td {
  width: 32px;
  height: 24px;
  line-height: 24px;
  color: $devui-text;
  border: none;
}

.devui-month-view .devui-day:not(.disabled) {
  cursor: pointer;
  font-size: $devui-font-size;
  color: $devui-feedback-overlay-text;
}

.devui-month-view .devui-day.disabled {
  cursor: not-allowed;
}

.devui-calendar-date {
  display: block;
  margin: 0 3px;
  width: 20px;
  height: 20px;
  padding: 0;
  line-height: 20px;
  background: transparent;
  text-align: center;
  font-size: $devui-font-size;
  color: $devui-text;
}

.devui-month-view .devui-out-of-month {
  .devui-calendar-date {
    opacity: 0.8;
    background-color: $devui-connected-overlay-bg;
    color: $devui-line;
  }

  &:not(.disabled):hover {
    .devui-calendar-date {
      background-color: $devui-list-item-hover-bg;
    }
  }
}

.devui-month-view .devui-minutes::before {
  content: ':';
  text-align: center;
  position: absolute;
  margin-left: -13px;
}

.devui-month-view .devui-seconds::before {
  content: ':';
  text-align: center;
  position: absolute;
  margin-left: -13px;
}

.devui-yearOption,
.devui-monthOption {
  width: 240px;
  height: 195px;
  position: absolute;
  left: -68px;
  top: 30px;
  background: $devui-base-bg;
  z-index: 1;
}

.devui-yearOption li,
.devui-monthOption li {
  width: 60px;
  height: 68px;
  line-height: 68px;
  text-align: center;
  display: inline-block;
  background: $devui-base-bg;
  border-radius: $devui-border-radius;
}

.devui-yearOption li:hover,
.devui-monthOption li:hover {
  background: $devui-list-item-hover-bg;
  color: $devui-list-item-hover-text;
  cursor: pointer;
}

.devui-yearOption li.active:not(.disabled),
.devui-monthOption li.active:not(.disabled) {
  color: $devui-list-item-active-text;
  background-color: $devui-list-item-active-bg;

  &:hover {
    background-color: $devui-list-item-active-hover-bg;
  }
}

.devui-yearOption li.disabled,
.devui-monthOption li.disabled {
  color: $devui-disabled-text;
  background-color: $devui-disabled-bg;
  cursor: not-allowed;
}

.devui-month-view .devui-timepicker {
  background: $devui-area;
  display: flex;
  justify-content: space-evenly;
}

.devui-month-view .devui-timepicker input {
  outline: 0;
  border: 0;
  background: $devui-area;
  color: $devui-text;
  width: 30px;
  padding: 0 0 0 3px;
  height: 30px;
  text-align: center;
}

.devui-month-view .devui-timepicker.devui-timepicker-disabled {
  background-color: $devui-disabled-bg;
}

.devui-month-view .devui-timepicker.devui-timepicker-disabled input {
  cursor: not-allowed;
  color: $devui-disabled-text;
  background-color: $devui-disabled-bg;
}

.devui-month-view .devui-timepicker .devui-time {
  position: relative;
  display: inline-block;
  width: 40px;
}

.devui-month-view .devui-timepicker .devui-time:not(:first-child)::before {
  content: ':';
}

.devui-month-view .devui-table {
  > tbody {
    > tr {
      > td {
        vertical-align: middle;
        padding: 4px;
        border-top: none;
        border-radius: $devui-border-radius;

        &.devui-day-start {
          border-radius: $devui-border-radius 0 0 $devui-border-radius;
        }

        &.devui-day-end {
          border-radius: 0 $devui-border-radius $devui-border-radius 0;
        }

        &:not(.disabled) {
          border-top: none;
          background: $devui-connected-overlay-bg;
        }

        &.devui-day:hover:not(.active):not(.disabled):not(.devui-out-of-month) {
          background-color: $devui-list-item-hover-bg;
        }

        &.devui-day:not(.disabled).active:hover {
          background-color: $devui-list-item-active-hover-bg;

          & > .devui-calendar-date {
            color: $devui-light-text;
          }
        }

        &.devui-day:not(.disabled):not(.active):not(.devui-out-of-month):not(:hover).devui-today {
          .devui-calendar-date {
            color: $devui-brand;
            font-weight: bold;
          }
        }

        &.devui-in-month-day.disabled {
          color: $devui-disabled-text;
          cursor: not-allowed;

          .devui-calendar-date {
            color: $devui-disabled-text;
          }

          &:not(.active) {
            background-color: $devui-disabled-bg;
          }

          &.active {
            background-color: $devui-disabled-line;
          }
        }

        &.devui-in-month-day:not(.disabled).active {
          background: $devui-list-item-active-bg;

          & > .devui-calendar-date {
            color: $devui-light-text;
          }
        }
      }
    }
  }

  > thead {
    > tr {
      > td {
        vertical-align: middle;
        line-height: 1.5;
        padding: 4px;
      }
    }
  }
}

.devui-noSelect {
  user-select: none;
}

.devui-month-view .devui-month-view-table td {
  border-bottom: none;
}

.devui-month-view .devui-table tfoot,
.devui-custom-area {
  border-top: 1px solid $devui-area;
}

.devui-month-view tfoot td {
  padding: 10px;
  vertical-align: middle;
  border-top: none;
}

.devui-dropdown-menu {
  font-size: $devui-font-size;
}

.devui-btn-wrapper {
  margin-top: 0;
}

.devui-time input[type='number']::-webkit-inner-spin-button,
.devui-time input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.devui-time input[type='number'] {
  -moz-appearance: textfield;
}

.devui-btn-nav {
  display: none;
  position: absolute;
  right: 9px;
  top: 0;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;

  .btn-up,
  .btn-down {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid;
  }

  .btn-up {
    padding-top: 2px;
    padding-bottom: 1px;
    border-color: transparent transparent $devui-text transparent;

    &:hover {
      border-color: transparent transparent $devui-icon-fill-active transparent;
    }
  }

  .btn-down {
    top: 16px;
    padding-bottom: 4px;
    border-color: $devui-text transparent transparent transparent;

    &:hover {
      border-color: $devui-icon-fill-active transparent transparent transparent;
    }
  }
}

.devui-time {
  input[type='number']::-webkit-inner-spin-button,
  input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type='number'] {
    -moz-appearance: textfield;
  }

  &:hover {
    .devui-btn-nav {
      display: block;
    }
  }
}

:host ::ng-deep .cdk-overlay-pane d-datepicker.devui-dropdown-menu {
  padding: 0;
}

:host .devui-form-control {
  padding-right: 0;
}
