@use "sass:map";
@use "../../../styles/tokens/base";
@use "../../../styles/tokens/color";
@use "../../../styles/tokens/space";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/layout";
@use "../../../styles/typography/mixins" as typoMixins;
@use "./config";
@use "sass:math";

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

  margin-bottom: space.get("large");
  padding-left: 0;
}

@mixin item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--color-border-strong);

  &:first-child {
    border-top: 1px solid var(--color-border-strong);
  }

  &:last-child {
    border-bottom: 0px;
  }

  ul {
    @include typoMixins.ul-list-base;
  }
}

@mixin enclosed-item($spacing: config.$enclosed-spacing) {
  padding-left: $spacing;
  padding-right: $spacing;
}

@mixin header {
  z-index: 1;
  margin-bottom: 0;
  width: 100%;
  max-width: none;
  font-weight: 700;
}

@mixin header-size($size, $config: config.$spacing) {
  padding: map.get($config, $size);
}

@mixin button-base {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;

  &:hover,
  &:focus-visible {
    color: var(--color-text-accent);
    cursor: pointer;
  }

  @include base.focusring-flush;
}

@mixin title {
  flex: 1 1 auto;
  display: block;
  max-width: 30em;
  line-height: convert.to-rem(math.round(18px * 1.25));
  text-align: left;
  white-space: normal;
  font-size: convert.to-rem(18px);
}

@mixin body {
  margin-top: space.get();
  margin-bottom: space.get("large");
  @include layout.reset-last-child-margin-bottom;
}

@mixin icon {
  flex: 0 0 auto;
  display: block;
}

@mixin icon-active {
  transform: rotate(180deg);
}