.design-documentation {
  $height-shape: 10rem;

  display: flex;
  flex-direction: column;
  align-content: stretch;
  justify-content: center;
  column-gap: spacing(0);
  row-gap: spacing(1);
  margin: spacing(0) 0;

  &--indent {
    padding: 0 spacing(-1);
  }

  @include breakpoint("medium") {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
  }

  &__item {
    display: flex;
    flex-direction: column;
    align-items: center;

    &__title {
      @include set-font(-1, "single", $transform: uppercase, $weight: bold);
      margin-top: spacing(-3);

      @include icon-style {
        display: inline-flex;
        justify-content: center;
        margin-right: spacing(-5);
        $size: line-height("single");
        height: $size;
        width: $size;
        border-radius: 50%;
      }

      &--allowed {
        &::before {
          @include set-icon("confirm");
          @include set-colors("utility-confirm");
        }
      }

      &--not-allowed {
        &::before {
          @include set-icon("close");
          @include set-colors("utility-warning");
        }
      }
    }
    
    &__content {
      order: -1;
      flex: 1 0 auto;
      display: flex;
    }
  }

  &__shape {
    width: $height-shape * 1.4;
    height: $height-shape;
    background-color: color("theme");

    &--circle {
      width: $height-shape;
      border-radius: 50%;
    }

    &--rounded-rectangle {
      border-radius: spacing(-2);
    }

    &--oval {
      width: $height-shape * 1.6;
      border-radius: 50%;
    }

    &--rounded-button {
      color: color("theme-foreground");
      width: auto;
      height: auto;
      align-self: center;
      padding: spacing($button-padding-vertical) spacing($button-padding-horizontal);
      line-height: line-height("single");
      border-radius: spacing($button-padding-vertical, $add: line-height("single", $times: 0.5));
    }
  }

  &__shape-example {
    align-self: center;

    .list--large-bullets {
      margin: 0;

      li {
        max-width: $height-shape * 1.5;
      }
    }

    .card {
      min-width: $height-shape * 1.7;
    }
  }

  &__shadow {
    width: $height-shape;
    height: $height-shape;
    background-color: color("background");
    box-shadow: $shadow-style-front color("shadow");

    &--center {
      box-shadow: $shadow-style-center color("shadow");
    }

    &--back {
      box-shadow: $shadow-style-back color("shadow");
    }
  }

  &__shadow-example {
    display: flex;
    justify-content: center;
    align-items: center;

    .form__field {
      margin-bottom: 0;
    }

    ul.list--large-bullets {
      max-width: $height-shape * 2;
      margin: 0;

      li::before {
        box-shadow: $shadow-style-front color("shadow");
      }
    }

    .card {
      max-width: $height-shape * 2;
      box-shadow: $shadow-style-front color("shadow");

      &:active {
        box-shadow: $shadow-style-back color("shadow");
      }
    }

    &__overlay {
      position: relative;
      line-height: line-height("single");
      height: line-height("single", $times: 8);
      max-width: $height-shape * 2;
      overflow: hidden;

      &__page {
        width: 130%;
        margin-left: -15%;
        margin-top: line-height("single", $times: -0.5);
      }

      &__panel {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        padding: spacing(-1);
        background-color: color("background");
        box-shadow: $shadow-style-front color("shadow");
      }
    }
  }

  &__gradient-example {
    min-width: $height-shape * 1.6;
    min-height: $height-shape;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: spacing(-1);
    @include set-colors("theme");
    
    &__title {
      @include set-font(3, "single", $weight: light);
    }

    &--gradient-fill {
      background-image: linear-gradient(to bottom right, color("theme") 15%, color("background"));
    }
  }

  &__gradient-truncator {
    width: auto;
    display: block;

    .truncator {
      max-width: $height-shape * 2;
      margin-bottom: 0;
    }
  }

  &__gradient-card {
    display: flex;
    position: relative;
    max-width: $height-shape * 2;
    overflow: hidden;

    .cards-container {
      display: flex;
      flex-direction: row;

      .card {
        flex: 1 0 60%;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: spacing($page-padding-side);
      z-index: $z-index-above-content;
      right: 0;
      background-image: linear-gradient(to left, color("background") $horizontal-scroll-fade-width, var(--transparent-background) 100%);
    }
  }

  &__box {
    $box-width: $height-shape * 1.4;
    padding: spacing(-1);
    width: spacing(-1, $times: 2, $add: $box-width);
    align-self: center;

    &--solid-fill {
      @include set-colors("background-secondary");
    }

    &--horizontal-borders {
      padding: spacing(-1) 0;
      width: $box-width;
      border-top: $width-border solid color("border");
      border-bottom: $width-border solid color("border");
    }

    &--fully-bordered {
      border: $width-border solid color("border");
    }
  }

  &__border-style {
    width: $height-shape * 1.4;
    margin: 0;

    &--dashed {
      border-bottom-style: dashed;
    }

    &--dotted {
      border-bottom-style: dotted;
    }
  }

  &__border-width {
    width: $height-shape * 1.4;
    margin: 0;

    &--slim {
      border-bottom-width: $width-border-slim;
    }

    &--active-nav {
      border-bottom-width: $nav-width-active-style;
    }

    &--utility {
      border-bottom-width: $width-border-utility;
    }
  }

  &__interactive-style {
    .nav__items {
      padding-right: spacing(0);
    }

    &--focus {
      .button,
      .a--text-link,
      .form__field input,
      .nav__item:nth-child(2) {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }

      .nav__item:nth-child(2) {
        z-index: $z-index-just-above-static;
        outline-offset: $outline-offset * -2;
      }
    }

    &--hover {
      .button:not(.button--text) {
        background-color: color("theme-hover");
      }

      .button--text {
        box-shadow: $shadow-style-front color("shadow");
      }

      .a--text-link {
        color: var(--color-foreground-theme);
        background-size: 0% $width-border, 0% $width-border;
      }

      .nav__item:nth-child(2) {
        color: color("foreground");
        background-size: 100% $nav-width-active-style;
      }

      .form__field input[type=checkbox] {
        background-color: color("interactive-hover");
      }
    }

    &--active {
      .button:not(.button--text) {
        background-color: color("theme-hover");
        box-shadow: $shadow-style-back color("shadow");
      }

      .button--text {
        box-shadow: $shadow-style-back color("shadow");
      }

      .a--text-link {
        color: color(foreground-theme-hover);
        background-size: 50% $width-border, 50% $width-border; 
        background-image: linear-gradient(color(foreground-theme-hover), color(foreground-theme-hover)),linear-gradient(color(foreground-theme-hover), color(foreground-theme-hover));
      }

      .nav__item:nth-child(2) {
        color: color(foreground-theme);
        background-image: linear-gradient(color(border-theme), color(border-theme));
        background-size: 100% $nav-width-active-style;
      }

      .form__field input[type=checkbox] {
        background-color: color("interactive-hover");
        box-shadow: $shadow-style-back color("shadow");
      }
    }
  }

  &__highlighting {
    max-width: $height-shape * 3;

    p {
      margin-bottom: 0;
    }

    &--nav-vertical {
      display: flex;

      .nav__items {
        margin-bottom: spacing(-2);
      }

      .nav__item {
        padding-right: spacing(-1);
      }

      p {
        margin-left: spacing(0);
        margin-top: 0;
        margin-bottom: spacing(-2);
      }
    }
  }

  &__toggle {
    @include content-container;
    min-width: $height-shape * 1.8;
    margin: 0 auto;

    ul {
      margin: 0;
    }

    .content-toggle__content {
      border-top: $width-border solid color("border-theme");
      padding-top: spacing(-2);
    }

    .content-toggle__toggle {
      flex: 0 0 auto;
      padding-bottom: spacing(-2);
      margin-top: spacing(-3);
      white-space: nowrap;

      background-image: linear-gradient(color("border"), color("border"));
      background-size: 100% 0;
      background-repeat: no-repeat;
      background-position: center bottom;

      @include icon-style {
        @include set-icon("expand");
        display: inline-block;
        margin-right: spacing(-5);
        transform: rotate(0deg);
        transition: transform $animation-timing-expand-flip $easing-in-out;
      }

      &:hover {
        color: color("foreground-hover");
      }

      &:active {
        color: color("foreground-theme");
      }

      &:focus-visible {
        outline: $outline-width solid color("utility-focus");
        outline-offset: $outline-offset;
      }

      &[aria-expanded="true"] {
        background-image: linear-gradient(color("border-theme"), color("border-theme"));
        background-size: 100% $nav-width-active-style;

        &::before {
          transform: rotateX(-180deg);
        }
      }
    }
  }
}