@use "sass:map" as sass-map;
@use "../../../styles/tokens/space";
@use "../../../styles/tools/convert";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/map";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/typography/config" as typographyConfig;
@use "./config";

@mixin list-base {
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  padding-left: 0;
  margin: 0 0 space.get("large") 0;
  max-width: none;
  @include generate.css-map(sass-map.get(typographyConfig.$caption, "large"));
  font-weight: bold;
}

@mixin item-base($config: config.$item-base) {
  position: relative;
  justify-content: center;
  flex: 0 1 0;

  @include arrow();

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

  @include breakpoint.get("xs", "down") {
    @include generate.css-map(config.$arrow-spacing-small, "default");
    &:first-of-type {
      margin-left: 0;
      @include generate.css-map(config.$arrow-spacing-small, "first");
    }
    &:last-of-type {
      @include generate.css-map(config.$arrow-spacing-small, "last");
    }

    flex-grow: 1;
  }
}

@mixin item-wide {
  flex-grow: 1;
}

@mixin arrow($config: config.$arrow-spacing) {
  margin: 0;

  @include breakpoint.get("sm") {
    @include generate.css-map($config, "default");

    &:first-of-type {
      margin-left: 0;
      @include generate.css-map($config, "first");
    }

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

  &:not(:last-of-type)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: calc(var(--stepbar-arrow-size) * -1);
    width: var(--stepbar-arrow-size);
    height: 100%;
    background-size: 100% 100%;
    pointer-events: none;
  }
}

@mixin item-color($variant, $color, $arrows: config.$arrows) {
  @if $color == done {
    @include generate.css-map(config.$item-done-colors, $variant);
  } @else {
    @include generate.css-map(config.$item-colors, $color);
  }
  // current item shows title from sm up
  @if $color == current {
    @include breakpoint.get("sm") {
      flex-grow: 1;
    }
  }

  &::after {
    background-image: sass-map.get($arrows, $variant, $color);
  }
}

@mixin link-overlay {
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

@mixin link-color($variant, $config: config.$link-colors) {
  @include generate.css-map($config, $variant, "base");

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

@mixin link-underline {
  &:hover,
  &:focus,
  &:active {
    @include generate.css-map(config.$link-underline);
  }
}

@mixin first-letter-only {
  max-width: convert.to-rem(9px);
  overflow: hidden;
  max-height: convert.to-rem(20px);
}

@mixin full-title {
  max-width: none;
  overflow: visible;
  max-height: none;
}