.variations {
  &__grid {
    margin-bottom: var(--spacer-3);

    &--colors button {
      font-size: 0;
    }
  }

  &__value {
    margin-left: var(--spacer-2);
    font-size: var(--font-size-sm);

    .i-check {
      color: var(--success);
    }

    &--empty {
      color: var(--text-muted);
    }
  }

  &__option {
    min-height: 2.3rem;
    min-width: 2.3rem;
    margin-bottom: var(--spacer-2);
    border: var(--border-width) solid var(--border-color);

    @media (hover: hover) {
      &:hover {
        border-color: var(--secondary-light);
      }
    }

    &:not(:last-of-type) {
      margin-right: var(--spacer-2);
    }

    &--selected:not(.disabled) {
      border-color: var(--secondary);
      box-shadow: 0 0 0 .1rem rgba(var(--secondary-rgb), .6);
    }

    &.disabled {
      cursor: not-allowed;
      position: relative;

      &::after {
        content: 'x';
        text-align: center;
        font-size: 10px;
        line-height: 1;
        padding-top: 1.5px;
        background: var(--danger);
        color: var(--danger-yiq);
        height: 14px;
        width: 14px;
        border-radius: 50%;
        display: block;
        position: absolute;
        top: -3px;
        right: -3px;
      }
    }
  }

  &__select {
    max-width: 350px;
  }
}