@use "../../Button/styles/style";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/convert";
@use "../../../styles/typography/mixins" as typoMixins;

@mixin base() {
  @include typoMixins.list-unstyled();

  gap: convert.to-rem(7px);
  display: flex;
  max-width: none;
  margin-bottom: space.get("large");
}

@mixin separator() {
  font-weight: bold;
  height: 50%;
  align-self: center;
  margin: 0 convert.to-rem(10px);
}

@mixin item() {
  margin-bottom: 0;
}

@mixin link() {
  border-radius: convert.to-rem(5px);
  margin-bottom: 0;
  background-color: var(--color-background-primary);

  &:hover {
    background-color: var(--color-background-contrast);
  }

  &:active {
    background-color: var(--color-surface-tertiary);
  }
}

@mixin link-active() {
  color: var(--color-text-inverse) !important;
  background-color: var(--color-surface-tertiary) !important;
  border-color: var(--color-border-accent) !important;
}