.product-detail-configurator-group {
    margin-bottom: $spacer-md;
}

.product-detail-configurator-group-title {
    font-weight: $font-weight-bold;
    margin-bottom: $spacer-sm;
}

.product-detail-configurator-options {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.product-detail-configurator-option {
    display: inline-flex;
    margin-right: $spacer-sm;
}

.product-detail-configurator-option-input {
    @include visually-hidden();

    + .product-detail-configurator-option-label {
        align-items: center;
        cursor: pointer;
        border: 1px solid $dark;
        border-radius: $border-radius;
        box-shadow: inset 3px 3px 0 $white, inset -3px -3px 0 $white;
        background-color: $white;
        display: inline-flex;
        justify-content: center;
        height: 60px;
        min-width: 60px;
        opacity: 0.35;
        padding: 3px;
        margin-bottom: $spacer-sm;
        transition: border-color 0.45s cubic-bezier(0.3, 0, 0.15, 1), background-color 0.45s cubic-bezier(0.3, 0, 0.15, 1);

        &.is-display-text {
            box-shadow: none;
            height: auto;
            padding: 5px 10px;
        }
    }

    &:focus-visible + .product-detail-configurator-option-label {
        box-shadow: $input-btn-focus-box-shadow;
    }

    &.is-combinable + .product-detail-configurator-option-label {
        opacity: 1;
        border: 1px solid $border-color;
    }

    &:checked + .product-detail-configurator-option-label {
        border: 1px solid $primary;

        &.is-display-text {
            background-color: $primary;
            color: $white;
        }
    }

    &.is-combinable + .product-detail-configurator-option-label,
    + .product-detail-configurator-option-label {
        &:hover,
        &:active,
        &:focus {
            border: 1px solid $primary;
        }
    }
}

.product-detail-configurator-option-image {
    height: 100%;
}
