@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-card';
@use "@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element";

.button {
  @include styles-tokens-card.composite-var(styles-tokens-card.$card-button);

  cursor: pointer;

  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  color: styles-tokens-card.$sys-neutral-text-main;

  background-color: transparent;
  border: 0;
  outline-color: transparent;

  &:hover {
    color: styles-tokens-card.$sys-neutral-text-support;
  }

  &:focus-visible {
    @include styles-tokens-card.outline-var(styles-tokens-element.$container-focused-s);

    color: styles-tokens-card.$sys-neutral-text-support;
    outline-color: styles-tokens-card.$sys-available-complementary;
  }

  &:active {
    color: styles-tokens-card.$sys-neutral-text-light;
  }

  svg {
    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
  }
}

.triggerClassName {
  --offset: #{styles-tokens-card.$space-drop-list-drop-offset};
}

.wrapper {
  position: relative;
}

li.item {
  width: max-content;
}