@use "system/colors";
@use "system/breakpoints";
@use "system/icon-map";
@use "system/spacing";
@use "system/typography";
@use "../input/mixins";
@use "system/states";
@use "sass:map";

.ods-date {
  @include mixins.form-states;

  position: relative;

  &__required {
    @extend %ods-margin-top-1;
    @extend %ods-padding-0;
    @extend %ods-text--size-lima;
    @extend %ods-text--weight-light;

    &::before {
      content: "* ";
    }

    &--optional::before {
      content: none;
    }
  }

  &__error-message {
    @include mixins.error-message;
  }

  &--error {
    @extend %ods-margin-bottom-1;
  }

  &__label {
    @include mixins.form-label;
    @extend %ods-margin-bottom-1;

    &::after {
      content: map.get(icon-map.$icons, "calendar") !important;
      font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
      @extend %ods-text--size-delta;

      line-height: 1em;
      position: absolute;
      right: 0.625rem;
      bottom: 0.5rem;

      @include breakpoints.large {
        bottom: 0.625rem;
      }
    }
  }

  &__input {
    @include mixins.form-component;
    @extend %ods-margin-top-2;

    &::placeholder {
      color: inherit;
    }

    &:focus-visible {
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &__datepicker {
    $padding: 0.625rem;

    background-color: colors.$white;
    box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
    display: flex;
    justify-content: center;
    padding: $padding;
    position: absolute;
    width: 100%;
    max-width: 25rem;
    min-width: 15rem;
    z-index: 99;

    &__nav,
    &__button {
      border: 0 none;
    }

    &__button {
      width: 1.875rem;
      height: 1.875rem;
      border-radius: 50%;
      border: none;
      background-color: transparent;
      @extend %ods-text--size-golf;

      line-height: 1.875rem;
      text-align: center;

      @extend %ods-margin-vertical-0, %ods-margin-horizontal-1;

      position: absolute;
      top: 0.625rem;

      &:not(:disabled) {
        cursor: pointer;
      }

      &:hover {
        background-color: colors.$gray;
        color: colors.$blue-state;
      }

      &:focus-visible {
        box-shadow: 0 0 0 0.375rem colors.$purple-light;
        outline: 0.125rem solid colors.$blue-state;
      }

      &:disabled {
        cursor: not-allowed;
        color: states.$disabled-text;

        &:hover {
          background-color: transparent;
          color: states.$disabled-text;
        }
      }

      &--next {
        right: 0.3rem;

        &::after {
          content: map.get(icon-map.$icons, "chevron-thin-right") !important;
          font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
        }
      }

      &--prev {
        left: 0.2rem;

        &::after {
          content: map.get(icon-map.$icons, "chevron-thin-left") !important;
          font-family: "Oslo Icons", Arial, Helvetica, sans-serif !important;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    /**
    * - Element styles since missing classes on child component
    */
    &__calendar {
      width: 100%;

      caption,
      th {
        font-weight: normal;
      }

      caption {
        @extend %ods-text--size-juliett;
        @extend %ods-margin-bottom-3, %ods-margin-top-1;

        text-transform: capitalize;
      }

      thead {
        border-bottom: 1px solid colors.$blue-dark;
        border-top: 1px solid colors.$blue-dark;
      }

      th {
        @extend %ods-text--size-kilo;
        @extend %ods-padding-vertical-1, %ods-padding-horizontal-0;
        @extend %ods-text--align-center;

        text-transform: capitalize;
      }

      td {
        @extend %ods-text--align-center;

        padding-top: 0.25rem;

        button {
          @extend %ods-text--weight-medium;

          color: colors.$blue-dark;
          width: 1.875rem;
          height: 1.875rem;
          border-radius: 50%;
          border: 2px solid transparent;
          background-color: transparent;
          font-size: inherit;
          font-family: inherit;
          padding: 0;

          &:focus-visible {
            outline: 0.25rem solid colors.$purple-light;
          }

          &:hover {
            background-color: colors.$blue-state;
            color: colors.$white;
          }

          // next/prev month
          &[data-adjacent="true"] {
            @extend %ods-text--size-lima;
            @extend %ods-text--weight-light;
          }

          &:not(:disabled) {
            cursor: pointer;
          }

          // today
          &[aria-current="date"] {
            background-color: colors.$beige;

            &:focus,
            &:hover {
              color: colors.$blue-dark;
            }
          }

          &[tabindex="0"]:focus-visible {
            background-color: colors.$blue-state;
            color: colors.$white;
          }

          // selected
          &[aria-selected="true"] {
            background-color: colors.$blue-dark;
            border-color: colors.$blue-dark;
            color: colors.$white;

            &:hover,
            &:focus,
            &:focus-visible {
              background-color: colors.$blue-state;
              border-color: colors.$blue-state;
              color: colors.$white;
            }
          }

          &[aria-current="date"][aria-selected="true"] {
            background-color: colors.$blue-dark;
            color: colors.$white;
          }

          &:disabled {
            color: states.$disabled-text;

            &:hover {
              background-color: transparent;
              cursor: not-allowed;
            }
          }
        }
      }
    }
  }
}