.color-picker {
  @include rem(margin, 0 0 20px);
  list-style: none;
  padding: 0;

  &--single,
  &--none {
    display: none;
  }

  .color-picker__swatch {
    @include rem(height, 40px);
    @include rem(width, 40px);
    float: left;
    margin-right: .5em;
    margin-bottom: .5em;
    cursor: pointer;

    .color-picker__swatch-selector {
      position: absolute;
      opacity: 0;
    }

    img {
      width: 100%;
      height: 100%;
      display: block;
      border: solid 1px $color__brand--light-grey;

      &:hover {
        border-width: 2px;
      }
    }

    .is-active,
    .color-picker__swatch-selector:checked + img {
      padding: 1px;
      border: solid 2px $color__brand--dark-grey;
    }
  }

  .color-picker__colors {
    overflow: hidden;
  }

  .color-picker__inner {
    @extend %clearfix;
  }

  .color-picker__header {
    @include rem(margin-bottom, 10px);
    font-family: $font__mns-london--bold;
  }
}