@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;

@include compatMixins.sky-default-overrides('.sky-timepicker-container') {
  --sky-override-timepicker-background-color: #{$sky-color-gray-05};
  --sky-override-timepicker-border-radius: 5px;
  --sky-override-timepicker-button-active-background-color: #{$sky-color-gray-10};
  --sky-override-timepicker-button-background-color: #{$sky-color-white};
  --sky-override-timepicker-button-border-radius: 3px;
  --sky-override-timepicker-button-focus-outline-offset: -2px;
  --sky-override-timepicker-button-focus-outline: -webkit-focus-ring-color auto
    5px;
  --sky-override-timepicker-button-hover-active-focus-border-radius: 0;
  --sky-override-timepicker-button-hover-active-focus-box-shadow: none;
  --sky-override-timepicker-button-hover-background-color: #{$sky-color-gray-05};
  --sky-override-timepicker-button-padding-horizontal: #{$sky-padding-plus-half};
  --sky-override-timepicker-button-padding-vertical: #{$sky-padding-half};
  --sky-override-timepicker-button-selected-background-color: #{$sky-background-color-info-light};
  --sky-override-timepicker-button-selected-box-shadow: #{inset 0 0 0 2px
    $sky-highlight-color-info};
  --sky-override-timepicker-column-border: #{1px solid
    $sky-border-color-neutral-light};
  --sky-override-timepicker-column-gap: 10px;
  --sky-override-timepicker-column-meride-divider: #{1px solid
    $sky-border-color-neutral-light};
  --sky-override-timepicker-content-space: #{$sky-padding $sky-padding 0
    $sky-padding};
  --sky-override-timepicker-font-size: #{$sky-font-size-base};
  --sky-override-timepicker-footer-padding-horizontal: #{$sky-padding};
  --sky-override-timepicker-footer-padding-vertical: #{$sky-padding};
  --sky-override-timepicker-text-color: #000;
}

@include compatMixins.sky-modern-overrides('.sky-timepicker-container', false) {
  --sky-override-timepicker-border: #{solid 1px $sky-border-color-neutral-medium};
  --sky-override-timepicker-button-background-color: var(--modern-color-white);
  --sky-override-timepicker-button-padding-vertical: var(--modern-size-5);
  --sky-override-timepicker-button-selected-hover-border-color: var(
    --modern-color-blue-50
  );
  --sky-override-timepicker-column-border: #{1px solid
    $sky-border-color-neutral-light};
  --sky-override-timepicker-content-space: var(--modern-space-s)
    var(--modern-space-s) 0 var(--modern-space-s);
  --sky-override-timepicker-font-size: #{$sky-theme-modern-font-body-default-size};
  --sky-override-timepicker-footer-padding-horizontal: var(--modern-size-10);
  --sky-override-timepicker-text-color: var(--modern-color-black);
}

.sky-timepicker-container {
  position: fixed;
  font-size: var(--sky-override-timepicker-font-size);
  background-color: var(
    --sky-override-timepicker-background-color,
    var(--sky-color-background-container-menu)
  );
  border-radius: var(
    --sky-override-timepicker-border-radius,
    var(--sky-border-radius-s)
  );
  border: var(--sky-override-timepicker-border, none);
}

.sky-timepicker-container :last-child ol {
  display: flex;
  flex-direction: column;
  height: 100%;

  li {
    border-bottom: var(--sky-override-timepicker-column-meride-divider);
    flex: 1;
  }
}

.sky-timepicker-column ol {
  border: var(
    --sky-override-timepicker-column-border,
    var(--sky-border-width-separator-light) solid
      var(--sky-color-border-separator-light)
  );
  column-gap: 1px;
  columns: 2;
  list-style-type: none;
  margin: 0;
  padding: 0;

  li {
    text-align: center;
    cursor: pointer;
    margin: 0;

    button {
      background-color: var(
        --sky-override-timepicker-button-background-color,
        var(--sky-color-background-action-tertiary-base)
      );
      border-width: 0;
      border-color: var(--sky-color-border-action-tertiary-base);
      color: var(
        --sky-override-timepicker-text-color,
        var(--sky-color-text-default)
      );
      cursor: pointer;
      padding: var(
          --sky-override-timepicker-button-padding-vertical,
          var(--sky-space-inset-pillarbox-2_3-top-m)
        )
        var(
          --sky-override-timepicker-button-padding-horizontal,
          var(--sky-space-inset-pillarbox-2_3-right-m)
        )
        var(
          --sky-override-timepicker-button-padding-vertical,
          var(--sky-space-inset-pillarbox-2_3-bottom-m)
        )
        var(
          --sky-override-timepicker-button-padding-horizontal,
          var(--sky-space-inset-pillarbox-2_3-left-m)
        );
      width: 100%;
      height: 100%;

      &:focus-visible:not(:active) {
        outline: var(--sky-override-timepicker-button-focus-outline);
        outline-offset: var(
          --sky-override-timepicker-button-focus-outline-offset
        );
        border-radius: var(
          --sky-override-timepicker-button-hover-active-focus-border-radius,
          var(--sky-border-radius-s)
        );
        box-shadow: var(
          --sky-override-timepicker-button-hover-active-focus-box-shadow,
          inset 0 0 0 var(--sky-border-width-action-focus)
            var(--sky-color-border-action-tertiary-focus),
          var(--sky-elevation-focus)
        );
      }

      &:hover:not(.sky-btn-active) {
        border-radius: var(
          --sky-override-timepicker-button-hover-active-focus-border-radius,
          var(--sky-border-radius-s)
        );
        background-color: var(
          --sky-override-timepicker-button-hover-background-color,
          var(--sky-color-background-action-tertiary-hover)
        );
        box-shadow: var(
          --sky-override-timepicker-button-hover-active-focus-box-shadow,
          inset 0 0 0 var(--sky-border-width-action-hover)
            var(
              --sky-override-timepicker-button-selected-hover-border-color,
              var(--sky-color-border-action-tertiary-hover)
            )
        );
      }

      &:active {
        background-color: var(
          --sky-override-timepicker-button-active-background-color,
          var(--sky-color-background-action-tertiary-active)
        );
        border-radius: var(
          --sky-override-timepicker-button-hover-active-focus-border-radius,
          var(--sky-border-radius-s)
        );
        box-shadow: var(
          --sky-override-timepicker-button-hover-active-focus-box-shadow,
          inset 0 0 0 var(--sky-border-width-action-active)
            var(--sky-color-border-action-tertiary-active)
        );
      }

      &.sky-btn-active {
        background-color: var(
          --sky-override-timepicker-button-selected-background-color,
          var(--sky-color-background-selected-soft)
        );
        box-shadow: var(
          --sky-override-timepicker-button-selected-box-shadow,
          inset 0 0 0 var(--sky-border-width-selected-s)
            var(
              --sky-override-timepicker-button-selected-hover-border-color,
              var(--sky-color-border-selected)
            )
        );
        border-radius: var(
          --sky-override-timepicker-button-border-radius,
          var(--sky-border-radius-s)
        );
      }
    }
  }
}

.sky-timepicker-column.sky-timepicker-24hour ol {
  columns: 4;
}

.sky-timepicker-column.sky-timepicker-24hour ol li {
  border-bottom-width: 0;
}

.sky-timepicker-content {
  display: flex;
  padding: var(
    --sky-override-timepicker-content-space,
    var(--sky-space-inset-balanced-m)
  );
  gap: var(
    --sky-override-timepicker-column-gap,
    var(--sky-space-gap-action_group-m)
  );
}

.sky-timepicker-footer {
  margin: 0;
  padding: var(
      --sky-override-timepicker-footer-padding-vertical,
      var(--sky-space-inset-pillarbox-2_3-top-m)
    )
    var(
      --sky-override-timepicker-footer-padding-horizontal,
      var(--sky-space-inset-pillarbox-2_3-right-m)
    )
    var(
      --sky-override-timepicker-footer-padding-vertical,
      var(--sky-space-inset-pillarbox-2_3-bottom-m)
    )
    var(
      --sky-override-timepicker-footer-padding-horizontal,
      var(--sky-space-inset-pillarbox-2_3-left-m)
    );
}

.sky-timepicker-footer .sky-timepicker-column {
  width: 100%;
}

.sky-timepicker-hidden {
  visibility: hidden;
}

.sky-timepicker-clock-icon-modern {
  display: none;
}

.sky-theme-modern {
  .sky-timepicker-clock-icon-default {
    display: none;
  }

  .sky-timepicker-clock-icon-modern {
    display: inline;
  }
}
