@use "../common/utils" as *;
@use "../common/mixins" as *;

.variation-selector {
    margin-bottom: calc-rem(20px);
    padding-bottom: calc-rem(15px);
    border-bottom: 1px solid rgba(var(--color-border), 1);

    .variation {
        select {
            @include media-breakpoint-up(lg) {
                max-width: 80%;
            }
        }

        label {
            font-size: calc-rem(12px);
            color: rgba(var(--color-secondary), .7);
            display: block;
        }

        &--options {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: calc-rem(5px);

            button {
                min-width: calc-rem(40px);
                height: calc-rem(40px);
                border: 1px solid rgba(var(--color-border), 1);
                border-radius: calc-rem(40px);
                font-size: calc-rem(12px);
                padding: calc-rem(5px 15px);

                &:hover {
                    border-color: rgba(var(--color-secondary), 1);
                    background: rgba(var(--color-secondary), 0.1);
                }

                &.is-active {
                    background: rgba(var(--color-secondary), 1);
                    color: #FFF;
                    transition: background-color .2s ease;

                    &:hover {
                        background: rgba(var(--color-secondary), .8);
                        transition: background-color .2s ease;
                    }
                }
            }
        }

        &--swatches {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: calc-rem(5px);

            button {
                background: var(--background-color);
                min-width: calc-rem(40px);
                height: calc-rem(40px);
                border: 1px solid rgba(var(--color-border), 1);
                border-radius: calc-rem(40px);
                font-size: calc-rem(12px);
                padding: calc-rem(5px 15px);

                &.is-active {
                    background: var(--background-color) url('../images/icons/icon-check-white.svg') no-repeat center center;
                    background-size: 16px;

                    &:hover {
                        background: var(--background-color) url('../images/icons/icon-check-white.svg') no-repeat center center;
                        background-size: 16px;
                    }
                }

                &:hover {
                    background: var(--background-color);
                }
            }
        }
    }
}
