@use "sass:color";

@mixin daylight() {
  @-webkit-keyframes pulse {
    to {
      box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
  }
  @-moz-keyframes pulse {
    to {
      box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
  }
  @-ms-keyframes pulse {
    to {
      box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
  }
  @keyframes pulse {
    to {
      box-shadow: 0 0 0 12px rgba(232, 76, 61, 0);
    }
  }

  .esri-daylight {
    padding: var(--esri-widget-padding);
    width: 350px;

    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-basis: auto;
    justify-content: space-between;
    gap: $cap-spacing;

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

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

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

    .esri-date-picker,
    &__season-picker {
      flex-grow: 1;
    }

    .esri-date-picker__calendar-toggle {
      height: 32px;
      font-size: $font-size--small;
    }

    &__container,
    &__season-picker {
      &--disabled {
        opacity: $opacity--disabled;
        pointer-events: none;
      }
    }

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

    @include timeSlider();

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

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

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

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

        .esri-slider__tick-label {
          line-height: 1em;
        }

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

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

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

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

    .esri-slider--shadow-on .esri-slider__thumb {
      box-shadow: 2px 2px 5px 0px rgba(148, 148, 148, 0.63);
    }

    .esri-slider.esri-slider--horizontal .esri-widget__anchor.esri-slider-with-dropdown__anchor {
      font-size: $font-size--tiny-time-slider;
      color: $interactive-font-color;
      &:hover {
        color: $interactive-font-color--hover;
      }
    }

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

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