.add-to-cart-form {
  &-price {
    font-size: font-px-to-rem(24px);
    color: $font-color;
    font-weight: 500;
    @include media-breakpoint-up(sm) {
      font-size: font-px-to-rem(36px);
    }

    .compare-at-price {
      color: theme-color("info");
      text-decoration: line-through;
    }
  }
  &-general-availability {
    font-size: font-px-to-rem(12px);
    color: $font-color;
    font-weight: 500;
    @include media-breakpoint-up(sm) {
      font-size: font-px-to-rem(20px);
    }
    &-value {
      color: theme-color("primary");
      &--danger {
        color: theme-color("danger");
      }
      &--warning {
        color: theme-color("warning");
      }
    }
  }
  .quantity-select button {
    background: $input-background;
    color: color-yiq($input-background);
    touch-action: manipulation;
  }
  @include media-breakpoint-up(md) {
    &-price {
      font-size: font-px-to-rem(28px);
    }
    &-general-availability {
      font-size: font-px-to-rem(14px);
    }
  }
  hr {
    border-color: $global-border-style;
  }
}

.product-variants {
  $self: &;
  list-style: none;
  padding: 0;
  margin: 0;
  &-variant {
    transition: opacity 200ms;
    &-title {
      font-size: font-px-to-rem(12px);
      @include media-breakpoint-up(sm) {
        font-size: font-px-to-rem(20px);
      }
      &-value {
        font-weight: 500;
      }
    }
    &-values {
      $self2: &;
      list-style: none;
      padding: 0;
      margin: 0;
      margin-left: -calc-spacer(1);
      margin-right: -calc-spacer(1);
      &-label {
        font-size: font-px-to-rem(11px);
        border: 2px solid theme-color-level("light", 1);
        font-weight: 500;
        min-width: 26px;
        padding: calc-spacer(1);
        transition: border-color 200ms;
        cursor: pointer;
        &:hover {
          border-color: theme-color("dark-text");
        }
      }
      &-radio {
        opacity: 0;
        position: fixed;
        height: 0;
        width: 0;
        &:checked {
          & + #{$self}-variant-values-label {
            border-color: theme-color("dark-text");
          }
        }
        &:focus + label, &:focus + svg {
          outline: theme-color("dark-text") dotted 2px;
        }
        &--bad-combination {
          & + #{$self2}-label {
            position: relative;
            color: theme-color-level("light", 1);
            &:hover {
              border-color: theme-color-level("light", 1);
              cursor: not-allowed;
            }
            &:after {
              display: block;
              width: 2px;
              height: 100% * sqrt(2);
              content: "";
              background: theme-color-level("light", 1);
              transition: background 200ms;
              transform: rotate(-45deg);
              top: 50% - 50% * sqrt(2);
              left: calc(50% - 1px);
              position: absolute;
            }
          }
        }

        &:disabled + label {
          color: theme-color-level("light", 1);
          cursor: not-allowed;
          opacity: 0.5;

          &:active,
          &:focus {
            outline: theme-color("dark-text") dotted thin;
          }
        }
      }
    }
    &--color {
      $self3: &;
      #{$self}-variant {
        &-values {
          &-label {
            $size: 28px;
            $size-border: 3px;
            border-radius: 50%;
            border-width: $size-border;
            width: $size;
            height: $size;
            padding: calc-spacer(0);
            line-height: $size - $size-border * 2;
            &:before {
              $inner-circle-size: $size - ($size-border - 1px) * 2; // Cover outer border by 1px to avoid color bleed.
              content: "";
              margin: -1px;
              display: block;
              border: 2px solid theme-color("light");
              width: $inner-circle-size;
              height: $inner-circle-size;
              border-radius: 50%;
              position: absolute;
            }
          }
          &-radio {
            &--bad-combination {
              & + #{$self}-variant-values-label {
                &:after {
                  height: 100%;
                  top: 0;
                }
              }
            }
            &:checked {
              &--bad-combination {
                & + #{$self}-variant-values-label {
                  &:after {
                    background: theme-color("dark-text");
                  }
                }
              }
            }
          }
        }
      }
    }
    &--disabled {
      opacity: 0.3;
      #{$self}-variant {
        &-values {
          &-label {
            &:hover {
              border-color: theme-color-level("light", 1);
              cursor: not-allowed;
            }
          }
          &-radio {
            &--bad-combination {
              & + #{$self}-variant-values-label {
                &:hover {
                  &:after {
                    background: theme-color-level("light", 1);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  & > li + li {
    margin-top: calc-spacer(4);
  }
  @include media-breakpoint-up(md) {
    &-variant {
      &-title {
        font-size: font-px-to-rem(14px);
      }
      &-values {
        &-value {
          font-size: font-px-to-rem(14px);
        }
      }
    }
  }
}

.color-select-label:focus {
  outline: none;
}

.select-label {
  cursor: pointer;
  padding: 4px 7px;
  border: 2px solid theme-color("borders");
  min-width: 32px;
  max-height: 32px;
  text-align: center;
  font-size: font-px-to-rem(14px);
  font-weight: 500;
  @include media-breakpoint-up(sm) {
    border: 3px solid theme-color("borders");
    padding: 7px 7px;
    min-width: 49px;
    max-height: 49px;
    font-size: font-px-to-rem(20px);
  }
  @include media-breakpoint-up(md) {
    border: 2px solid theme-color("borders");
    padding: 4px 7px;
    min-width: 32px;
    max-height: 32px;
    font-size: font-px-to-rem(14px);
  }

  &:focus {
    outline: none;
  }

  input:checked + & {
    border-color: theme-color("secondary");
  }
}

.add-to-cart-button {
  padding: 6px 12px;
  font-size: font-px-to-rem(17px);
  @include media-breakpoint-up(sm) {
    padding: 12px;
    font-size: font-px-to-rem(30px);
  }
  @include media-breakpoint-up(md) {
    padding: 6px 12px;
    font-size: font-px-to-rem(18px);
  }
}