@use "sass:color";

@mixin daylight() {
  @keyframes pulse {
    to {
      box-shadow: 0 0 0 12px rgb(232 76 61 / 0%);
    }
  }

  .geoscene-daylight {
    display: flex;
    flex-basis: auto;
    flex-direction: column;
    flex-shrink: 0;
    gap: $cap-spacing;
    justify-content: space-between;
    padding: var(--geoscene-widget-padding);
    width: 350px;

    /* stylelint-disable-next-line order/order */
    @include timeSlider();

    &__anchor {
      font-size: $font-size--small;
    }

    &__panel--error {
      padding: 0 $side-spacing;
      animation: geoscene-fade-in 250ms ease-in-out;
    }

    &__container {
      display: flex;
      flex-direction: row;
      gap: $side-spacing;
      align-items: center;
      justify-content: space-between;
    }

    &__date-picker,
    &__season-picker {
      flex-grow: 1;
    }

    &__play-pause-button {
      flex: 0;
    }

    .geoscene-slider.geoscene-slider--horizontal .geoscene-slider__thumb {
      $thumb-size: 27px;

      top: -$thumb-size * 0.5;
      left: -$thumb-size * 0.5;
      border: 7px solid #0079c14d;
      background-clip: padding-box;
      background-color: $button-color;
      background-position: 0 0 !important;
      width: $thumb-size;
      height: $thumb-size;

      &:hover,
      &:active,
      &:focus {
        background-color: $button-color--hover;
      }
    }

    .geoscene-slider.geoscene-slider--horizontal {
      z-index: 2; // Ensure the timezone popover stays on top of the date picker (which has a z-index=1) - #60677

      .geoscene-slider-with-dropdown__box {
        display: flex;
        gap: $cap-spacing--eighth;
        align-items: center;
        z-index: 1;
        margin: 0;
        margin-top: -$cap-spacing--three-quarters;
        min-width: inherit;
        text-align: center;
        white-space: nowrap;
        font-size: $font-size--tiny-time-slider;
        will-change: left;

        .geoscene-slider__label {
          display: inline-block;
          position: static;
          inset-inline-start: auto;
          margin: 0;
          outline: none;
          min-width: auto;
          list-style: none;
          line-height: 1em;
          font-variant-numeric: tabular-nums;
        }

        .geoscene-slider__label-input {
          display: inline-block;
        }
      }

      .geoscene-slider-with-dropdown__box--drop-down-on,
      .geoscene-slider-with-dropdown__box--drop-down-off {
        width: min-content;
      }
    }

    .geoscene-slider--ampm-on .geoscene-slider.geoscene-slider--horizontal {
      padding: 30px 8px 42px;

      ~ .geoscene-daylight__play-pause-button {
        margin-bottom: 10px; // Align vertically with the slider
      }
    }

    .geoscene-slider.geoscene-slider--horizontal .geoscene-widget__anchor.geoscene-slider-with-dropdown__anchor {
      color: $interactive-font-color;
      font-size: $font-size--tiny-time-slider;

      &:hover {
        color: $interactive-font-color--hover;
      }
    }

    calcite-label {
      --calcite-label-margin-bottom: 0;
    }
  }
}

@if $include_Daylight == true {
  @include daylight();
}