@import "../../scss/utilities/index";

.header {
  display: flex;
  align-items: center;
  padding: 0.5em;
}

.mat-datepicker-toggle {
  @extend .datepicker-ui__toggle;
}

.datepicker-ui__toggle.mat-mdc-icon-button.mat-mdc-button-base {
  padding: 0;
  width: calc-rem(40px);
  height: calc-rem(40px);
  line-height: 2;
}

.header-label {
  flex: 1;
  height: 1em;
  font-weight: 500;
  text-align: center;
}

.select-date-label {
  color: var(--color-brand-dark);
  padding-top: 1.6rem;
  padding-left: 1.6rem;
}

.mat-calendar-table {
  .mat-calendar-body {
    tr:first-child[aria-hidden='true'] {
      display: none;
    }
  }
}

.mat-calendar-body-label {
  visibility: hidden;
}

.mat-calendar-body-cell-content {
  border-radius: 0.25rem !important;
}

.mat-calendar-body-active {
  .mat-calendar-body-today {
    color: var(--color-brand-light) !important;
    background-color: var(--color-brand-light2) !important;
  }
}

.mat-calendar {
  align-self: center;

  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {
    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
      background-color: var(--color-brand-light2);
      color: var(--color-black);
    }
  }

  .mat-calendar-body-cell.mat-calendar-body-active {
    &, &:hover {
      .mat-calendar-body-cell-content.mat-calendar-body-selected {
        background-color: var(--color-brand-light) !important;
        color: var(--color-white) !important;
      }
    }
  }

  .mat-calendar-body-selected {
    background-color: var(--color-brand-light);
    color: var(--color-white) !important;

    .mat-calendar-body-today {
      color: var(--color-white) !important;
    }
  }

  .mat-calendar-table-header,
  .mat-calendar-body-label {
    color: var(--color-gray-500);
  }

  .mat-calendar-body-cell > .mat-calendar-body-today {
    opacity: 1;
  }

  .mat-calendar-body-cell-content,
  .mat-date-range-input-separator {
    color: var(--color-black);
  }

  .mat-calendar-content {
    padding: 0 1.6rem;
  }

  .mat-calendar-table-header th {
    @include fontSize(16px);
  }

  .mat-calendar-table-header-divider::after {
    display: none;
  }

  .mat-calendar-body {
    @include fontSize(16px);
  }

  .mat-calendar-body-in-range {
    &::before {
      background-color: var(--color-brand-light2);
    }

    .mat-calendar-body-cell-content {
      color: var(--color-black) !important;
    }
  }

  .mat-calendar-body-range-start, .mat-calendar-body-range-end {
    .mat-calendar-body-cell-content {
      color: var(--color-white) !important;
    }
  }
}

.mat-datepicker-popup {
  .mat-datepicker-content {
    color: var(--color-black);
    box-shadow: $box-shadow-large;
  }

  .mat-datepicker-actions {
    display: unset;
    margin-top: 1rem;
    padding: 0 1.6rem 1.6rem 1.6rem;

    .mat-button-base + .mat-button-base {
      margin-left: unset;
    }

    button.mat-button-base {
      min-width: 100%;
    }
  }

  .mat-calendar-body-disabled {
    > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
      color: var(--color-gray-300);
    }
  }
}

.ecabs-date-range-picker-v2 {
  .mat-calendar-content {
    padding: 0 1.6rem 1.6rem;
  }
}

ecabs-date-range-picker-v2 {
  .mat-datepicker-input {
    text-align: center;
  }

  input {
    border: none;
    box-shadow: none;
  }

  input:focus {
    outline: none;
    box-shadow: none;
  }
}