@use "sass:color";

// Variables
$primary: #222299;
$gray: #ddd;
$text: #333;
$font: "Segoe UI";
$border-radius: 6px;
$spacing: 1rem;

.variant-selector {
  padding: $spacing;

  .title {
    font-size: 1.5rem;
    margin-bottom: $spacing;
  }

  .section {
    display: flex;
    flex-direction: column;
    gap: $spacing;

    h3 {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: $text;
    }
  }

  .group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    .group-label {
      font-weight: 500;
      color: $text;
    }

    .color-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;

      .color-swatch {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: 2px solid transparent;
        cursor: pointer;
        transition: border 0.3s;

        &.selected {
          border-color: $primary;
        }
      }
    }

    .button-options {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;

      .option-button {
        padding: 0.4rem 0.75rem;
        border: 1px solid $gray;
        background: white;
        border-radius: $border-radius;
        cursor: pointer;
        font-size: 0.95rem;
        transition: all 0.3s ease;

        &.selected {
          background-color: $primary;
          opacity: 0.6;
          border-color: $primary;
          color: $primary;
          font-weight: 600;
        }

        &:hover {
          border-color: $primary;
        }
      }

      &.size-options {
        .option-button {
          min-width: 40px;
          text-align: center;
        }
      }
    }
  }
}

// Responsive
@media (max-width: 600px) {
  .variant-selector {
    .color-options,
    .button-options {
      gap: 0.4rem;
    }

    .option-button {
      font-size: 0.85rem;
      padding: 0.3rem 0.6rem;
    }
  }
}