.selection-list {
  border: none;
  padding: 0;
  margin: 0 0 spacing(-1) 0;

  legend {
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    margin-bottom: spacing(-5);
  }

  &__option {
    position: relative;
    margin-bottom: spacing(-3, $subtract: spacing(-5));
    padding: spacing(-5) 0;

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

    input[type="checkbox"],
    input[type="radio"] {
      -webkit-appearance: none;
      appearance: none;
      position: absolute;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: $z-index-just-above-static;
      background-color: transparent;
      outline: none;

      & + label {
        @include set-font(0, "single");
        display: flex;
        flex-direction: row;
        align-items: start;
        color: color("foreground-hover");

        @include icon-style {
          content: '';
          flex: 0 0 auto;
          display: flex;
          align-items: center;
          justify-content: center;
          @include set-font(-1, "single");
          width: font-size(0);
          height: font-size(0);
          border: $width-border solid color("border");
          margin-right: spacing(-4);
          margin-top: .25em; //visual alignement - didn't work with taking the "top-padding" of a lineheight
        }
      }

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

      &:checked+label {
        color: color("foreground");

        &::before {
          @include set-colors("theme");
          border: none;
        }
      }

      &[disabled]+label {
        color: color("foreground-disabled");
      }

      &:not([disabled]):hover {
        outline: none;

        &+label {
          color: color("foreground");
        }
      }

      &:not([disabled]):active {
        outline: none;

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

    input[type="radio"] {
      & + label {
        &::before {
          border-radius: 50%;
        }
      }
    }

    input[type="checkbox"]:checked+label::before {
      @include set-icon("confirm");
    }

    input[type="radio"]:checked+label::before {
      background-color: color("theme-foreground");
      border: #{spacing(-5, $times: -1, $add: font-size(0), $divideby: 2)} solid color("theme");
    }
  }

  &-overlay-container {
    position: relative;
  }

  &--overlay {
    display: none;
    width: spacing(0, $times: 2, $add: 14rem);
    position: absolute;
    left: 0;
    top: 0;
    padding: spacing(-3);
    box-shadow: $shadow-style-front color("shadow");
    z-index: $z-index-navigation;
    background-color: color("background");
    margin-bottom: 0;
  }

  &--toggled {
    display: block;
  }

  /*
  &--toggled {
    & .sub-nav__content {
      display: block;
      z-index: $z-index-navigation;
    }
  }
  */
}