/*
* DatePicker theme
*
*/

@use '../../../../style/core/utilities.scss' as utilities;

.dnb-date-picker {
  &__portal .dnb-popover {
    --popover-background-color: var(--color-white);
    --popover-border-radius: 0.25rem;

    @include utilities.sharpDropShadow();
  }

  &__container {
    border-radius: 0.25rem;
    background-color: var(--color-white);

    .dnb-date-picker--inline & {
      @include utilities.sharpDropShadow();
    }
  }

  &__addon,
  &__calendar {
    // border
    &::after {
      background-color: var(--color-black-8);
    }
  }

  &__header {
    --gap: 0.25rem;

    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: var(--gap);

    // border
    &::after {
      background-color: var(--color-black-8);
    }

    &--only-month-label {
      justify-content: center;
      margin-bottom: 1rem;
    }

    &__row {
      min-width: 60%;
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      justify-content: space-between;

      &--year {
        min-width: calc(40% - var(--gap));
      }
    }

    &__nav .dnb-button {
      box-shadow: none;
    }

    &__title {
      text-transform: capitalize;
      text-align: center;

      font-size: var(--font-size-basis);
      font-weight: var(--font-weight-medium);
      color: var(--color-black-80);
    }
  }

  &__labels {
    &__day {
      text-transform: capitalize;
      font-weight: var(--font-weight-medium);
      color: var(--color-black-80);
    }
  }

  &__day,
  &__labels__day {
    text-align: center;
  }

  &__day {
    &--today .dnb-button {
      font-weight: var(--font-weight-medium);

      &::after {
        content: '';

        position: absolute;
        bottom: 0.1875rem;
        height: 0.2188em;
        width: 0.2188em;
        pointer-events: none;

        border-radius: 50%;
        background-color: currentcolor;
      }
    }

    &--preview .dnb-button,
    &--inactive .dnb-button,
    &--within-selection:not(#{&}--start-date):not(#{&}--end-date)
      .dnb-button:not(:hover) {
      background-color: transparent;
    }

    &--preview:not(#{&}--inactive):not(#{&}--start-date):not(
        #{&}--end-date
      ),
    &--within-selection:not(#{&}--inactive):not(#{&}--start-date):not(
        #{&}--end-date
      ) {
      background-color: var(--color-mint-green-50);
    }

    &--start-date:not(#{&}--inactive),
    &--end-date:not(#{&}--inactive) {
      &::after {
        background-color: var(--color-mint-green-50);
      }

      .dnb-button {
        color: var(--color-mint-green-25);
        background-color: var(--color-emerald-green);
      }
    }
    &--start-date:not(#{&}--inactive):not(#{&}--preview),
    &--end-date:not(#{&}--inactive):not(#{&}--preview) {
      .dnb-button {
        &:hover {
          box-shadow: none;
        }
      }
    }

    html:not([data-whatintent='touch'])
      &--start-date#{&}--within-selection
      .dnb-button:hover:not([disabled]),
    html:not([data-whatintent='touch'])
      &--end-date#{&}--within-selection
      .dnb-button:hover:not([disabled]) {
      color: var(--color-mint-green-25);
      background-color: var(--color-emerald-green);
    }

    &--disabled .dnb-button {
      text-decoration: line-through;
    }

    &--inactive .dnb-button {
      color: var(--color-black-55);
    }

    &--inactive .dnb-button,
    &--disabled .dnb-button {
      &[disabled] {
        box-shadow: none;
      }
    }

    html:not([data-whatintent='touch']) &--inactive .dnb-button[disabled] {
      cursor: default;
    }
  }

  &--open .dnb-input,
  &:not(#{&}__status--error)
    .dnb-form-label:hover
    ~ &__inner
    .dnb-input:not([data-input-state='disabled']) {
    .dnb-input__shell {
      @include utilities.fakeBorder(var(--color-sea-green), 0.125rem);
    }
  }

  &--open .dnb-button--input-button.dnb-button--selected {
    --button-color-bg--default: var(--button-color-bg--active);
    --button-color-icon--default: var(--button-color-icon--active);
    --button-input-separator-color--default: var(
      --button-input-separator-color--active
    );
  }

  &__status--error:not(#{&}--open)
    .dnb-form-label:hover
    ~ &__inner
    .dnb-input:not([data-input-state='disabled']) {
    .dnb-input__shell {
      @include utilities.fakeBorder(var(--color-fire-red), 0.125rem);
    }
  }
}