@use "sass:map";
@use "../../../styles/tokens/space";
@use "../../../styles/tools/generate";
@use "../../../styles/typography/mixins" as typoMixins;
@use "./config";

@mixin list-base($border: config.$border) {
  @include typoMixins.list-unstyled;

  margin-bottom: space.get("large");

  > * {
    border-top: $border;

    &:last-child {
      border-bottom: $border;
    }
  }
}

@mixin list-spacious {
  > *:first-child {
    border-top-width: 0;
  }

  > *:last-child {
    border-bottom-width: 0;
  }
}

@mixin item-base() {
  position: relative;

  > *:last-child {
    margin-bottom: 0;
  }

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

@mixin item-color($color, $palette: config.$color-palette) {
  @include generate.css-map($palette, $color);
}

@mixin item-size($size, $sizes: config.$spacing) {
  padding-top: map.get($sizes, $size);
  padding-bottom: map.get($sizes, $size);
}

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

  &:first-child {
    border-top-width: 0;
  }
  &:last-child {
    border-bottom-width: 0;
  }
}

@mixin control($config: config.$control-states) {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  text-align: left;

  @include generate.css-map($config, "default");

  &:hover {
    @include generate.css-map($config, "hover");
  }

  &:focus {
    @include generate.css-map($config, "hover");
  }

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin nested-enclosed {
  &:not(:first-child) {
    border-width: 1px;
  }

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

@mixin indicator {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  margin-top: -2px;
  margin-bottom: -2px;
}