/* stylelint-disable selector-max-compound-selectors */
/* stylelint-disable @stylistic/indentation */
/* stylelint-disable declaration-no-important */
/* stylelint-disable selector-not-notation */
/* stylelint-disable selector-max-class */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable scss/selector-no-redundant-nesting-selector */
/* stylelint-disable property-disallowed-list */
/* stylelint-disable selector-no-qualifying-type */
@use '@funidata/fudis-core' as core;

// When navigating calendar pop-up with Tab key, close button appears at the very end. Button does not appear when using mouse.

.mat-datepicker-close-button {
  text-transform: uppercase !important;
  color: core.$color-white !important;
  font-size: core.$body-text-md-font-size; // Necessary for overwriting font-size in customer app side

  &:focus {
    @include core.focus-generic;
  }

  &.mat-mdc-raised-button:not(:disabled) {
    background-color: core.$color-primary;
  }
}

.fudis-datepicker {
  &__toggle {
    // Target datepicker pop-up toggle button (i.e. calendar icon)
    & .mat-mdc-icon-button {
      @include core.bg-color('transparent');

      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 0;
      width: core.$spacing-lg;
      height: core.$spacing-lg;
      font-size: core.$body-text-md-font-size; // Needed for overwriting ngMaterial font-size which affects Firefox and Safari

      &:focus {
        @include core.focus-generic;
      }

      & svg {
        width: core.$spacing-lg;
        height: core.$spacing-lg;
      }

      & mat-icon {
        width: core.$spacing-lg;
        height: core.$spacing-lg;
      }
    }
  }

  &__datepicker {
    // Selected day when not focused
    & .mat-calendar-body-selected {
      @include core.bg-color('primary');
      @include core.text-color('white');
      @include core.border('2px', 'solid', 'primary');

      // Hover on selected day
      &:hover {
        @include core.text-color('gray-dark');
        @include core.bg-color('primary-light');
        @include core.border('2px', 'solid', 'primary');
      }

      // If selected day is today, remove unnecessary box-shadow
      &.mat-calendar-body-today {
        box-shadow: none;
      }
    }

    // Make today's date circle darker
    & .mat-calendar-body-today:not(.mat-calendar-body-selected) {
      border-color: core.$color-gray-dark !important;
    }

    // Target controls on top of the calendar pop-up
    & .mat-calendar-controls {
      // Month and year buttons
      // Forward and backward icon buttons
      & .mat-mdc-button,
      & .mat-mdc-icon-button {
        @include core.bg-color('transparent');

        font-size: core.$body-text-md-font-size; // Necessary for overwriting font-size in customer app side

        &.mat-calendar-next-button,
        &.mat-calendar-previous-button {
          position: relative;
          width: core.$spacing-xl;
          height: core.$spacing-xl;

          /* stylelint-disable-next-line max-nesting-depth */
          & svg {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: core.$spacing-md;
            height: core.$spacing-md;
          }
        }
      }

      // Make sure month/year button has 0 opacity and not have borders like button
      & .mat-mdc-button-persistent-ripple.mdc-button__ripple {
        &::before {
          opacity: 0 !important;
        }
      }
    }

    // After M3 update Datepicker calendar's table font-size does not work in customer app side unless we override them
    & .mat-calendar-table {
      // Weekday headers
      .mat-calendar-table-header th {
        font-size: core.$body-text-md-font-size;
      }

      & .mat-calendar-body {
        // Month abbreviation
        & .mat-calendar-body-label {
          font-size: core.$body-text-md-font-size;
        }

        // Calendar days
        & .mat-calendar-body-cell {
          font-size: core.$body-text-md-font-size;
        }
      }
    }

    // Selected day which is also active (i.e. focused)
    & .mat-calendar-body-cell.mat-calendar-body-active .mat-calendar-body-selected,
    &
      .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
      ) {
      @include core.text-color('gray-dark');
      @include core.bg-color('primary-light');
    }

    &
      .mat-calendar-body-cell.mat-calendar-body-active
      > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(
        .mat-calendar-body-comparison-identical
      ) {
      @include core.bg-color('primary-light');
    }

    // If selected day is not inside allowed date range and is disabled in the calendar pop-up (user is able to insert invalid date through input)
    & .mat-calendar-body-cell.mat-calendar-body-disabled .mat-calendar-body-selected {
      @include core.text-color('gray-dark');
      @include core.bg-color('gray-light');
      @include core.border('1px', 'solid', 'gray-dark');
    }

    // Target individual day buttons and make the focus border round
    & button:not(.mat-calendar-body-disabled):focus {
      @include core.focus-generic;

      &.mat-calendar-body-cell {
        border-radius: core.$spacing-xxl;
      }
    }
  }
}