// pikaday colors override
$pd-text-color: var(--gl-text-color-default);
$pd-title-color: var(--gl-action-neutral-foreground-color-default);
$pd-title-bg: var(--gl-action-neutral-background-color-default);
$pd-picker-bg: var(--gl-datepicker-background-color);
$pd-picker-border: var(--gl-border-color-default);
$pd-picker-border-bottom: var(--gl-border-color-default);
$pd-th-color: var(--gl-text-color-subtle);
$pd-day-color: var(--gl-text-color-default);
$pd-day-bg: transparent;
$pd-day-hover-color: var(--gl-text-color-default);
$pd-day-hover-bg: transparent;
$pd-day-today-color: var(--gl-text-color-default);
$pd-day-selected-color: var(--gl-datepicker-date-text-color-selected);
$pd-day-selected-bg: var(--gl-control-background-color-selected-default);
$pd-day-selected-shadow: var(--gl-control-background-color-selected-default);
$pd-day-disabled-color: var(--gl-text-color-disabled);
$pd-week-color: var(--gl-text-color-subtle);

@import "pikaday/scss/pikaday";

.gl-datepicker-actions {
  @apply gl-text-sm;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  @apply gl-flex;
  @apply gl-justify-center;
  @apply gl-items-center;
  @apply gl-pointer-events-none;
  @apply gl-px-2;

  .gl-button.gl-button {
    @apply gl-rounded-md;
  }
}

.gl-datepicker-theme {
  @apply gl-font-regular;
  @apply gl-border-none;
  @apply gl-mt-3;
  border-radius: var(--gl-dropdown-border-radius);
  background-color: var(--gl-datepicker-background-color);

  &.is-bound {
    @apply gl-shadow-md;

    @media (forced-colors: active) {
      border: 1px solid;
    }
  }

  .pika-lendar {
    @apply gl-m-0;
    @apply gl-pt-5;
    @apply gl-px-3;
    @apply gl-pb-3;
    @apply gl-rounded-default;
  }

  .pika-title {
    @apply gl-leading-normal;
    @apply gl-mb-5;
    @apply gl-h-5;
  }

  .pika-next,
  .pika-prev {
    @apply gl-rounded-small;
    @apply gl-w-5;
    @apply gl-h-5;

    &.is-disabled {
      @apply gl-cursor-not-allowed;
    }

    @media (forced-colors: none) {
      background-color: var(--gl-action-neutral-background-color-default);
      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
      background-image: none;
      opacity: 100%;

      &::before {
        /* Apply a slightly larger border-radius to the ::before pseudo-element
        to prevent background color shimmer issue in Safari.
        This is necessary because the parent element (which already has a border-radius)
        requires the ::before element to extend beyond its edges to ensure proper coverage. */
        @apply gl-rounded-lg;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--gl-action-neutral-foreground-color-default);
      }

      &:not(.is-disabled):hover {
        background-color: var(--gl-action-neutral-background-color-hover);

        &::before {
          background-color: var(--gl-action-neutral-foreground-color-hover);
        }
      }

      &:not(.is-disabled):focus {
        background-color: var(--gl-action-neutral-background-color-focus);

        &::before {
          background-color: var(--gl-action-neutral-foreground-color-focus);
        }
      }

      &:not(.is-disabled):active {
        background-color: var(--gl-action-neutral-background-color-active);

        &::before {
          background-color: var(--gl-action-neutral-foreground-color-active);
        }
      }

      &.is-disabled::before {
        background-color: var(--gl-action-disabled-foreground-color);
      }
    }

    @media (forced-colors: active) {
      border: 1px solid;
    }
  }

  .pika-next {
    &::before {
      mask-image: url("#{$gl-icon-chevron-right}");
    }

    @media (forced-colors: active) {
      background-image: url("#{$gl-icon-chevron-right}");
    }
  }

  .pika-prev {
    &::before {
      mask-image: url("#{$gl-icon-chevron-left}");
    }

    @media (forced-colors: active) {
      background-image: url("#{$gl-icon-chevron-left}");
    }
  }

  .pika-label {
    @apply gl-rounded-small;
    @apply gl-text-base;
    @apply gl-py-0;

    background-color: var(--gl-action-neutral-background-color-default);
    box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-default);
    color: var(--gl-action-neutral-foreground-color-default);

    &:hover {
      background-color: var(--gl-action-neutral-background-color-hover);
      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-action-neutral-border-color-hover);
      color: var(--gl-action-neutral-foreground-color-hover);
    }

    @media (forced-colors: active) {
      border: 1px solid;
    }
  }

  .pika-select {
    top: 0;
    @apply gl-h-5;
  }

  th {
    @apply gl-pb-3;
    @apply gl-font-bold;
    @apply gl-leading-normal;
  }

  abbr[title] {
    @apply gl-no-underline;
    @apply gl-cursor-default;
  }

  .pika-button {
    border-radius: var(--gl-action-border-radius);
    @apply gl-shadow-none;
    @apply gl-py-2;
    @apply gl-text-center;
    @apply gl-leading-normal;
    @apply gl-w-7;
    @apply gl-h-7;
    @apply gl-text-base;
    @apply gl-border-1;
    @apply gl-border-solid;
    @apply gl-border-transparent;

    &:hover {
      box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
    }

    @media (forced-colors: active) {
      border: 1px solid;
    }
  }

  .is-today > .pika-button {
    @apply gl-font-bold;
    @apply gl-border-strong;
  }

  .is-selected > .pika-button {
    @apply gl-font-normal;

    &:hover {
      background-color: var(--gl-control-background-color-selected-hover);
      color: var(--gl-datepicker-date-text-color-selected);
      box-shadow: none;
    }
  }

  .is-selected.is-today > .pika-button {
    @apply gl-font-bold;
    @apply gl-border-transparent;
  }

  .is-disabled {
    @apply gl-cursor-not-allowed;
  }
}