@import "../variables/_all";
@import "../mixins/_all";

.color-select {
  display: inline-block;
  margin: 4px -4px;
}

.color-select-item {
  display: inline-block;
  vertical-align: middle;
  border: 2px solid transparent;
  position: relative;
  padding: 3px;
  box-sizing: content-box;
  @include circle-shape($color-select-item-size);
  text-align: center;
  margin: 0;
  &:hover {
    cursor: pointer;
    border-color: #AAA;
  }
  &:active {
    opacity: 0.8;
  }

  &.color-select-item-selected {
    border-color: #555;
  }
}

.color-select-item-radio {
  @include full-overlay();
  opacity: 0;
}

.color-select-item-value {
  display: inline-block;
  @include circle-shape($color-select-item-size);
}