@use '~@moda/om';

.ColorSwatch {
  $self: &;
  $outer-border-color: rgba(black, 0.5);
  $on-sale-dot-size: om.space(1);
  $default-size: om.space(6);
  $small-size: om.space(5);

  position: relative;
  width: $default-size;
  height: $default-size;
  border: 1px solid transparent;
  background-color: transparent;
  border-radius: 50%;
  padding: 1px;
  cursor: pointer;
  flex-shrink: 0;

  &--small {
    width: $small-size;
    height: $small-size;
  }

  // Inset dot
  &::before {
    display: none;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 33%;
    height: 33%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background-color: om.color('snow');
    z-index: 1;
  }

  &__chip {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    // Transparent overlay
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: rgba(black, 0.2);
      opacity: 0;
      transition: opacity 200ms;
    }
  }

  &:hover,
  &--hover {
    border-color: om.color(elephant);

    // Inset dot
    &::before {
      display: block;
    }

    #{$self}__chip {
      // Transparent overlay
      &::before {
        opacity: 1;
      }
    }
  }

  &:focus,
  &--focus,
  &--selected {
    // Inset dot
    &::before {
      display: block;
    }
  }

  &--sold-out {
    #{$self}__chip {
      // Slash
      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 1px;
        transform: translate(-50%, -50%) rotate(-45deg);
        background-color: $outer-border-color;
        z-index: 1;
      }
    }
  }

  &--on-sale {
    // Small top-right dot
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: calc(-1 * $on-sale-dot-size / 2);
      right: calc(-1 * $on-sale-dot-size / 2);
      width: $on-sale-dot-size;
      height: $on-sale-dot-size;
      border-radius: 50%;
      background-color: om.color('code-red');
    }
  }

  &:disabled,
  &--disabled {
    pointer-events: none;
  }

  &--light {
    // Inset dot
    &::before {
      background-color: om.color(ink);
    }

    #{$self}__chip {
      border: 1px solid om.color(ink, 0.25);
    }
  }
}