@use 'sass:map';
@use '../utils/constants.scss';
@use '../utils/tokens.scss' as tokens;
@use '../utils/stateLayerVars.scss' as stateLayerVars;
@use '../components/icon.vars.scss' as iconVars;
@use '../components/button.vars.scss' as buttonVars;
@use '../components/actionList.vars.scss' as actionListVars;

@import '@viasat/beam-tokens/components/ActionList';

.#{actionListVars.$actionListBaseClass} {
  display: flex;
  flex-direction: column;

  &__no-results {
    display: flex;
    min-height: tokens.$bm-comp-actionlist-size-height;
    padding: tokens.$bm-comp-actionlist-space-y 0;
    justify-content: center;
    align-items: center;
    color: tokens.$bm-sem-color-text-primary;
    text-align: center;
    font: tokens.$bm-sem-typo-body-md;
  }

  &__loading {
    padding: tokens.$bm-comp-actionlist-space-y 0;
  }
}

.#{actionListVars.$actionListItemBaseClass} {
  display: flex;
  flex-direction: row;
  gap: tokens.$bm-comp-actionlist-space-gap;
  min-height: tokens.$bm-comp-actionlist-size-height;
  padding: tokens.$bm-comp-actionlist-space-y 0;
  position: relative;
  align-items: center;
  color: tokens.$bm-comp-actionlist-color-text;
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;

  &[hidden] {
    display: none;
  }

  &:has(&__supporting-text) {
    align-items: flex-start;
  }

  &:focus {
    outline: none;
  }

  &--kind-destructive {
    color: tokens.$bm-sem-color-text-negative;
  }

  &--disabled {
    pointer-events: none;
    cursor: default;
    opacity: tokens.$bm-sem-opacity-disabled;

    & > .#{stateLayerVars.$stateLayerBaseClass} {
      $appearance: map.get(stateLayerVars.$state-layer-tokens, 'base');
      $disabled: map.get($appearance, 'disabled');
      @include stateLayerVars.get-state-layer-styles-body($disabled);
    }
  }

  &--active {
    & > .#{stateLayerVars.$stateLayerBaseClass} {
      $appearance: map.get(stateLayerVars.$state-layer-tokens, 'base');
      $focused: map.get($appearance, 'focus-visible-within');
      @include stateLayerVars.get-state-layer-styles-body($focused);
    }
  }

  &__choice,
  &__switch {
    align-items: center;
    justify-content: center;
    display: flex;
    color: tokens.$bm-comp-actionlist-color-check;
  }

  &__choice {
    width: tokens.$bm-comp-actionlist-size-icon;
    height: tokens.$bm-comp-actionlist-size-icon;
  }

  &__content-before {
    min-width: tokens.$bm-comp-actionlist-size-icon;
    min-height: tokens.$bm-comp-actionlist-size-icon;
    display: flex;
    color: tokens.$bm-comp-actionlist-color-icon;

    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;

    .#{actionListVars.$actionListItemBaseClass}--kind-destructive & {
      #{iconVars.$iconColor}: tokens.$bm-sem-color-icon-negative-strong;
    }
  }

  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  &__text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    align-self: stretch;

    overflow: hidden;
    text-overflow: ellipsis;
    font: tokens.$bm-comp-actionlist-typo-text;
  }

  &--header {
    cursor: default;
  }

  &--header &__text {
    color: tokens.$bm-comp-actionlist-color-heading;
    font: tokens.$bm-sem-typo-label-md;
  }

  &__supporting-text {
    align-self: stretch;

    overflow: hidden;
    color: tokens.$bm-comp-actionlist-color-text-supporting;
    font: tokens.$bm-comp-actionlist-typo-text-supporting;
  }

  &__content-after {
    display: flex;
    justify-content: flex-end;
    gap: tokens.$bm-comp-actionlist-space-gap;

    min-width: tokens.$bm-comp-actionlist-size-icon;
    min-height: tokens.$bm-comp-actionlist-size-icon;

    color: tokens.$bm-comp-actionlist-color-text-suffix;
    font: tokens.$bm-comp-actionlist-typo-text-suffix;
    text-align: right;

    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;

    .#{buttonVars.$buttonBaseClass} {
      #{buttonVars.$buttonIconSizeVarName}: tokens.$bm-comp-actionlist-size-icon;
      --bm-comp-btn-size-sm-width: tokens.$bm-comp-actionlist-size-icon;
      --bm-comp-btn-size-sm-height: tokens.$bm-comp-actionlist-size-icon;
    }
  }

  &__flyout {
    #{iconVars.$iconSize}: tokens.$bm-comp-actionlist-size-icon;
    #{iconVars.$iconColor}: tokens.$bm-comp-actionlist-color-icon;

    &:dir(rtl) {
      transform: scaleX(-1);
    }
  }

  & > .#{stateLayerVars.$stateLayerBaseClass} {
    #{stateLayerVars.$left}: calc(
      -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
    );
    #{stateLayerVars.$right}: calc(
      -1 * #{tokens.$bm-comp-actionlist-size-state-offset}
    );
    #{stateLayerVars.$outline-offset}: calc(
      -1 * var(#{stateLayerVars.$outline-width})
    );
    border-radius: tokens.$bm-comp-actionlist-radius;
    z-index: -1;
  }
}

.#{actionListVars.$actionListGroupBaseClass} {
  display: flex;
  flex-direction: column;

  &[hidden] {
    display: none;
  }

  &__heading {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // Intentional: using semantic token for symmetric vertical padding (design decision).
    padding: tokens.$bm-sem-space-25 0;
    color: tokens.$bm-comp-actionlist-color-group-heading;
    font: tokens.$bm-comp-actionlist-typo-heading-group;
  }

  &__no-results {
    display: flex;
    min-height: tokens.$bm-comp-actionlist-size-height;
    padding: tokens.$bm-comp-actionlist-space-y 0;
    justify-content: flex-start;
    align-items: center;
    color: tokens.$bm-sem-color-text-primary;
    font: tokens.$bm-sem-typo-body-sm;
  }

  &__divider {
    margin: tokens.$bm-comp-actionlist-space-y 0;
  }
}

.#{actionListVars.$actionListIconButtonBaseClass} {
  &__placeholder {
    display: flex;
    width: tokens.$bm-comp-actionlist-size-icon;
    height: tokens.$bm-comp-actionlist-size-icon;
  }
}