//
// Custom color
// custom checkbox/radio as color
//

.form-color {
  list-style: none;
  padding: 0;

  &:after,
  &:before {
    content: '';
    display: table;
  }

  &:after {
    clear: both;
  }

  label {
    width: 2.25rem;
    height: 2.25rem;
    float: left;
    padding: .375rem;
    margin-bottom: 0;
    margin-right: .375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .7;
    border: 1px solid transparent;
    border-radius: $border-radius;
    @include transition($transition-base);
    transform: scale(.95);

    &:hover {
      cursor: pointer;
      opacity: 1;
    }

    i, svg {
      opacity: 0;
      color: rgba(255, 255, 255, .9);
    }
  }

  input {
    left: -9999px;
    position: absolute;

    &:checked + label {
      transform: scale(1.1);
      opacity: 1;

      i, svg {
        opacity: 1;
      }
    }
  }
}

.form-color-wide {
  label {
    height: 1.5rem;
  }

}

// Sizes

.form-color-xl {
  label {
    width: 5rem;
    height: 5rem;
  }

  &.form-color-wide {
    label {
      width: 5rem;
      height: 3.5rem;
    }
  }
}

.form-color-lg {
  label {
    width: 3.25rem;
    height: 3.25rem;
  }
}

.form-color-sm {
  label {
    width: 1.25rem;
    height: 1.25rem;
  }
}