@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../button/mixins" as *;
@use "../button/colors" as *;
@use "../../base/calendar";

// adduse


$material-calendar-navigator-icon-fontsize: $material-base-icon-size;
$material-calendar-navigator-fontsize: 14px;
$material-calendar-navigator-line-height: 1.6;
$material-calendar-width: $material-calendar-body-width;
$material-calendar-height: $material-calendar-body-height + $material-calendar-navigator-fontsize * $material-calendar-navigator-line-height + $material-calendar-navigator-vertical-padding * 2;

.dx-calendar {
  width: $material-calendar-width;
  min-width: $material-calendar-width;
  height: $material-calendar-height + 20px;
  min-height: $material-calendar-height + 20px;
  background-color: $calendar-bg;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: 0;
  border: 1px solid transparent;

  &.dx-calendar-with-footer {
    height: $material-calendar-height + $material-calendar-footer-height + 10px + 20px;
    min-height: $material-calendar-height + $material-calendar-footer-height;

    .dx-calendar-body {
      bottom: $material-calendar-footer-height + 10px;
    }

    .dx-calendar-footer {
      text-align: center;
      height: $material-calendar-footer-height;
      width: 100%;
    }
  }
}

.dx-calendar-navigator {
  line-height: $material-calendar-navigator-line-height;
  height: $material-calendar-navigator-height;
  display: table;
  border-collapse: collapse;

  .dx-button {
    height: 100%;
    display: table-cell;

    @include dx-button-flat-color-styling($button-default-bg, $button-default-text-hover-bg, $button-default-text-focused-bg, $button-default-text-active-bg);

    .dx-button-text {
      text-transform: none;
    }

    .dx-icon {
      font-size: $material-calendar-navigator-icon-fontsize;
    }

    &.dx-calendar-disabled-navigator-link {
      border-collapse: collapse;
      visibility: visible;
      opacity: 1;

      .dx-button-content {
        opacity: 0.5;
      }
    }

    &.dx-state-active:not(.dx-calendar-disabled-navigator-link) {
      z-index: 1;
    }

    &.dx-state-hover:not(.dx-calendar-disabled-navigator-link) {
      z-index: 1;
    }
  }

  .dx-calendar-caption-button {
    font-size: $material-calendar-navigator-fontsize;
    line-height: 1.2;
    text-transform: uppercase;
    right: $material-nav-button-width;
    left: $material-nav-button-width;

    &.dx-button {
      .dx-button-content {
        padding: $material-calendar-caption-button-padding;
      }
    }
  }
}

.dx-calendar-navigator-previous-month {
  width: $material-nav-button-width;
  background: none;

  &.dx-button {
    margin: 0 2px;
  }

  .dx-button-content {
    padding: 0;
  }

  &.dx-state-hover {
    z-index: 1;
  }
}

.dx-calendar-navigator-previous-month,
.dx-calendar-navigator-next-view {
  width: $material-nav-button-width;
  background: none;

  &.dx-button {
    margin: 0 1px;
  }

  .dx-button-content {
    padding: 0;
  }
}


.dx-calendar-navigator-previous-view,
.dx-calendar-navigator-previous-month {
  left: 0;

  &.dx-button {
    border-radius: $calendar-navigator-border-radius 0 0 $calendar-navigator-border-radius;

    .dx-icon {
      color: $calendar-shevron-icon-color;
    }
  }
}

.dx-calendar-navigator-next-view,
.dx-calendar-navigator-next-month {
  right: 0;

  &.dx-button {
    border-radius: 0 $calendar-navigator-border-radius $calendar-navigator-border-radius 0;

    .dx-icon {
      color: $calendar-shevron-icon-color;
    }
  }
}

.dx-calendar-body {
  top: $material-calendar-body-top;

  thead {
    font-size: 11px;
    line-height: 1.2;

    tr {
      height: 25px;
      padding-bottom: 10px;
    }
  }

  table {
    border-spacing: 0;

    th {
      color: $calendar-header-color;
      font-weight: 500;
      text-align: center;
      padding: 1px 0 $material-calendar-header-bottom-padding 0;
    }
  }
}

.dx-calendar-cell {
  text-align: center;
  padding: $material-calendar-cell-vertical-padding 0;
  color: $calendar-color;
  font-size: $material-calendar-cell-font-size;
  width: $material-calendar-cell-width;
  border-radius: $calendar-cell-contoured-border-radius;

  .dx-calendar-view-decade &,
  .dx-calendar-view-year & {
    span {
      line-height: 400%;
      width: 48px;
    }
  }


  .dx-calendar-view-century & {
    span {
      line-height: 200%;
      width: 48px;
    }
  }


  span {
    display: inline-block;
    width: $material-calendar-cell-diameter;
    line-height: $material-calendar-cell-diameter;
    border-radius: 50%;
  }

  &.dx-calendar-today {
    font-weight: bold;
    color: $calendar-cell-selected-bg;
  }

  &.dx-state-hover,
  &.dx-calendar-contoured-date:not(.dx-calendar-today):not(.dx-calendar-selected-date):not(.dx-calendar-empty-cell) {
    color: $calendar-cell-hover-color;

    span {
      background-color: $calendar-hover-bg;
    }
  }

  &.dx-calendar-other-view,
  &.dx-calendar-empty-cell {
    color: $calendar-cell-other-color;


    &.dx-state-hover,
    &.dx-state-active {
      color: $calendar-cell-other-hover-color;
    }
  }

  &.dx-calendar-empty-cell {
    cursor: default;
    color: color.change($calendar-color, $alpha: 0.25);

    &.dx-state-hover:not(.dx-calendar-selected-date) {
      color: color.change($calendar-color, $alpha: 0.25);

      span {
        background-color: transparent;
      }
    }
  }

  &.dx-state-active {
    &:not(.dx-calendar-empty-cell) {
      &:not(.dx-calendar-selected-date) {
        span {
          background-color: $calendar-cell-active-bg;
        }
      }
    }
  }

  &.dx-calendar-selected-date {
    &,
    &.dx-calendar-today {
      span {
        color: $base-inverted-text-color;
        background-color: $calendar-cell-selected-bg;
        font-weight: normal;
      }
    }
  }
}

.dx-invalid {
  &.dx-calendar {
    border-color: $calendar-invalid-faded-border-color;

    &.dx-state-focused {
      border-color: $calendar-invalid-focused-border-color;
    }
  }
}

.dx-popup-wrapper {
  .dx-calendar {
    .dx-calendar-caption-button {
      margin: 0;
    }
  }
}