@use "sass:map";

.vuiOptionsList {
  display: flex;
  flex-direction: column;
  font-size: $fontSizeStandard;
}

.vuiOptionsList--scrollable {
  max-height: 220px;
  overflow-y: auto;
}

.vuiOptionsList--s {
  .vuiOptionsListItem {
    padding: ($sizeXxs + 1px) $sizeXs;
  }
}

.vuiOptionsList--m {
  .vuiOptionsListItem {
    padding: ($sizeXxs + 1px) $sizeS;
  }
}

.vuiOptionsList--l {
  .vuiOptionsListItem {
    padding: $sizeXs $sizeS;
  }
}

.vuiOptionsListItem {
  background-color: var(--vui-color-empty-shade);
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }

  &:focus-visible {
    outline: none;
  }
}

// Color
$color: (
  accent: (
    "color": var(--vui-color-accent-shade),
    "hover-color": var(--vui-color-accent-shade),
    "selected-color": var(--vui-color-accent-lighter-shade)
  ),
  primary: (
    "color": var(--vui-color-primary-shade),
    "hover-color": var(--vui-color-primary-shade),
    "selected-color": var(--vui-color-primary-lighter-shade)
  ),
  success: (
    "color": var(--vui-color-success-shade),
    "hover-color": var(--vui-color-success-shade),
    "selected-color": var(--vui-color-success-lighter-shade)
  ),
  danger: (
    "color": var(--vui-color-danger-shade),
    "hover-color": var(--vui-color-danger-shade),
    "selected-color": var(--vui-color-danger-lighter-shade)
  ),
  warning: (
    "color": var(--vui-color-warning-shade),
    "hover-color": var(--vui-color-warning-shade),
    "selected-color": var(--vui-color-warning-lighter-shade)
  ),
  neutral: (
    "color": var(--vui-color-text),
    "hover-color": var(--vui-color-primary-shade),
    "selected-color": var(--vui-color-primary-lighter-shade)
  )
);

@each $colorName, $colorValue in $color {
  .vuiOptionsListItem--#{$colorName} {
    color: #{map.get($colorValue, "color")};

    &:focus-visible,
    &:hover {
      color: #{map.get($colorValue, "hover-color")};
      background-color: #{map.get($colorValue, "selected-color")};

      .vuiIcon__inner {
        color: #{map.get($colorValue, "hover-color")};
      }
    }
  }
}