.#{$ns}ListControl {
  &-items {
    display: block;
    margin: -$ListControl-gutterWidth/2;

    &:empty {
      display: none;
    }
  }

  &-item {
    position: relative;
    user-select: none;
    font-size: $ListControl-fontSize;
    display: inline-block;
    vertical-align: middle;
    margin: $ListControl-gutterWidth/2;
    border: $ListControl-item-borderWidth solid $ListControl-item-borderColor;
    background-color: $ListControl-item-bg;
    padding: $ListControl-item-paddingY $ListControl-item-paddingX;
    color: $ListControl-item-color;
    transition: $ListControl-item-transition;
    max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;

    &:not(.is-disabled) {
      cursor: pointer;
    }

    .b-inherit {
      border-color: $ListControl-item-color;
    }

    @include hover {
      background-color: $ListControl-item-onHover-bg;
      border-color: $ListControl-item-onHover-borderColor;
      color: $ListControl-item-onHover-color;

      .b-inherit {
        border-color: $ListControl-item-onHover-borderColor;
      }
    }

    &.is-disabled {
      pointer-events: none;
      opacity: $ListControl-item-onDisabled-opacity;
      border-color: $ListControl-item-onDisabled-borderColor;

      @if variable-exists('ListControl-item-onDisabled-bg') {
        background-color: $ListControl-item-onDisabled-bg;
      }

      @if variable-exists('ListControl-item-onDisabled-color') {
        color: $ListControl-item-onDisabled-color;
      }

      .b-inherit {
        border-color: $ListControl-item-onDisabled-borderColor;
      }
    }

    &:hover:active,
    &.is-active {
      background-color: $ListControl-item-onActive-bg;
      border-color: $ListControl-item-onActive-borderColor;
      color: $ListControl-item-onActive-color;

      @if variable-exists('ListControl-item-onActive-onHover-bg') {
        &:hover {
          background-color: $ListControl-item-onActive-onHover-bg;
        }
      }

      .b-inherit {
        border-color: $ListControl-item-onActive-color;
      }

      &:before {
        content: '';
        position: absolute;
        width: px2rem(14px);
        height: px2rem(14px);
        background-color: $ListControl-item-onActive-before-bg;
        right: 0;
        bottom: 0;
      }

      &:after {
        content: '';
        position: absolute;
        width: px2rem(10px);
        height: px2rem(5px);
        border-color: $ListControl-item-onActive-after-borderColor;
        border-style: solid;
        border-width: 0 0 px2rem(2px) px2rem(2px);
        right: px2rem(1px);
        bottom: px2rem(5px);
        transform: rotate(-40deg);
      }
    }
  }

  &-itemImage {
    margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;

    img {
      display: block;
      max-width: 100%;
    }
  }

  &-itemLabel {
    text-align: center;
  }

  &-itemImage + &-itemLabel {
    margin-top: $ListControl-item-paddingY;
  }

  &-placeholder {
    color: $Form-input-placeholderColor;
  }
}