@use 'libs/components/theme/src/lib/styles/mixins' as defaultMixins;
@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-autocomplete-results-container'
) {
  --sky-override-autocomplete-actions-add-icon-padding-right: #{$sky-theme-modern-space-xs};
  --sky-override-autocomplete-actions-no-results-line-height: normal;
  --sky-override-autocomplete-actions-no-results-padding: 7px 13px;
  --sky-override-autocomplete-actions-top-border: 1px solid #{$sky-border-color-neutral-medium};
  --sky-override-autocomplete-no-results-font-size: 15px;
  --sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
  --sky-override-autocomplete-result-background-color: transparent;
  --sky-override-autocomplete-result-box-shadow: none;
  --sky-override-autocomplete-result-focus-background-color: #{$sky-background-color-neutral-light};
  --sky-override-autocomplete-result-focus-box-shadow: none;
  --sky-override-autocomplete-result-margin-bottom: 4px;
  --sky-override-autocomplete-result-padding: 3px #{$sky-padding-double};
  --sky-override-autocomplete-results-container-background-color: #{$sky-color-white};
  --sky-override-autocomplete-results-container-border-radius: 0;
  --sky-override-autocomplete-results-no-results-padding: 4px;
  --sky-override-autocomplete-results-padding: 4px;
}

::ng-deep {
  @include compatMixins.sky-modern-overrides(
    '.sky-autocomplete-results-container',
    false
  ) {
    --sky-override-autocomplete-actions-no-results-line-height: normal;
    --sky-override-autocomplete-actions-no-results-padding: 7px 13px;
    --sky-override-autocomplete-actions-top-border: 1px solid #{$sky-border-color-neutral-medium};
    --sky-override-autocomplete-no-results-font-size: 15px;
    --sky-override-autocomplete-no-results-padding: #{$sky-padding-squish-default};
    --sky-override-autocomplete-result-margin-bottom: 0;
    --sky-override-autocomplete-result-padding: #{$sky-theme-modern-space-sm 0
      $sky-theme-modern-space-sm $sky-theme-modern-space-md};
    --sky-override-autocomplete-results-no-results-padding: var(
        --sky-space-inset-vertical-top-s
      )
      0 var(--sky-space-inset-vertical-bottom-s);
  }
}

.sky-autocomplete-results-container {
  position: fixed;
  background-color: var(
    --sky-override-autocomplete-results-container-background-color,
    var(--sky-color-background-container-menu)
  );
  border-radius: var(
    --sky-override-autocomplete-results-container-border-radius,
    var(--sky-border-radius-s)
  );
}

.sky-autocomplete-results-waiting {
  height: 70px;
}

.sky-autocomplete-results {
  display: flex;
  flex-direction: column;
  padding: var(
    --sky-override-autocomplete-results-padding,
    var(--sky-space-inset-vertical-top-s) 0
      var(--sky-space-inset-vertical-bottom-s)
  );
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 35px;
  max-height: calc(50vh - 50px);

  &:has(.sky-autocomplete-no-results) {
    padding: var(--sky-override-autocomplete-results-no-results-padding, 0);
  }
}

.sky-autocomplete-result {
  background-color: var(
    --sky-override-autocomplete-result-background-color,
    var(--sky-color-background-action-tertiary-base)
  );
  box-shadow: var(
    --sky-override-autocomplete-result-box-shadow,
    inset 0 0 0 var(--sky-border-width-action-base)
      var(--sky-color-border-action-tertiary-base)
  );
  margin-bottom: var(
    --sky-override-autocomplete-result-margin-bottom,
    var(--sky-space-gap-action_group-s)
  );
  padding: var(
    --sky-override-autocomplete-result-padding,
    var(--sky-space-inset-pillarbox-1_2-top-m)
      var(--sky-space-inset-pillarbox-1_2-right-m)
      var(--sky-space-inset-pillarbox-1_2-bottom-m)
      var(--sky-space-inset-pillarbox-1_2-left-m)
  );
  cursor: pointer;

  &:last-child {
    margin-bottom: 0;
  }
}

.sky-autocomplete-no-results {
  padding: var(
    --sky-override-autocomplete-no-results-padding,
    var(--sky-space-inset-pillarbox-1_2-top-m)
      var(--sky-space-inset-pillarbox-1_2-right-m)
      var(--sky-space-inset-pillarbox-1_2-bottom-m)
      var(--sky-space-inset-pillarbox-1_2-left-m)
  );
  font-size: var(--sky-override-autocomplete-no-results-font-size, inherit);
}

.sky-autocomplete-actions {
  border-top: var(
    --sky-override-autocomplete-actions-top-border,
    var(--sky-border-width-divider) var(--sky-border-style-divider)
      var(--sky-color-border-divider)
  );

  .sky-autocomplete-action {
    border: none;
  }

  .sky-autocomplete-actions-no-results {
    display: inline-block;
    padding: var(
      --sky-override-autocomplete-actions-no-results-padding,
      var(--sky-space-inset-pillarbox-1_2-top-m) 0
        var(--sky-space-inset-pillarbox-1_2-bottom-m)
        var(--sky-space-inset-pillarbox-1_2-left-m)
    );
    line-height: var(
      --sky-override-autocomplete-actions-no-results-line-height,
      var(--sky-font-line_height-body-m)
    );
  }
}

.sky-autocomplete-action-add {
  float: right;

  sky-icon {
    padding-right: var(
      --sky-override-autocomplete-actions-add-icon-padding-right,
      var(--sky-space-gap-icon-s)
    );
  }
}

.sky-autocomplete-descendant-focus:not(.sky-autocomplete-action) {
  background-color: var(
    --sky-override-autocomplete-result-focus-background-color,
    inherit
  );
}

.sky-autocomplete-descendant-focus.sky-autocomplete-action {
  //default
  outline: thin dotted;
  //webkit
  outline: -webkit-focus-ring-color auto 5px;
}

.sky-autocomplete-descendant-focus {
  border: none;
  box-shadow: var(
    --sky-override-autocomplete-result-focus-box-shadow,
    inset 0 0 0 var(--sky-border-width-action-focus)
      var(--sky-color-border-action-tertiary-focus),
    var(--sky-elevation-focus)
  );
}
