.list {
  &--bordered {
    border: solid $gray 1px;
    .list__item {
      border-bottom: solid 1px $gray;
    }
  }
  &--default-size {
    width: rem-calc(364);
  }
  &--fit-content {
    width: fit-content;
  }
  &--full-width {
    width: 100%;
  }
  &--pointer {
    .list__item {
      cursor: pointer;
    }
  }
  &--shadow {
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;
    border-radius: 2px;
  }
  &--striped {
    .list__item:hover {
      background-color: scale-color($color: $black, $lightness: 95%);
      cursor: pointer;
    }
  }
  &__section {
    padding: rem-calc(5 0);
  }
  &__subheader {
    box-sizing: border-box;
    color: rgba(0, 0, 0, 0.54);
    font-size: $tiny-font-size-global;
    font-weight: 500;
    line-height: 48px;
    padding-left: 16px;
    width: 100%;
  }
  &__item {
    @extend .grid-x;
    min-height: 60px;
    padding: 0 20px;
    &:last-of-type {
      border: none;
    }
    &--right {
      @extend .align-right;
    }
    &--center {
      @extend .align-center;
    }
    &--left {
      @extend .align-left;
    }
    &--justify {
      @extend .align-justify;
    }
    &--spaced {
      @extend .align-spaced;
    }
    &--top {
      @extend .align-top;
    }
    &--middle {
      @extend .align-middle;
    }
    &--bottom {
      @extend .align-bottom;
    }
  }
  &__item-no-padding {
    padding: 0;
  }
  &__list-text {
    margin-right: rem-calc(10);
    margin-left: rem-calc(10);
  }
}