.cf-variant-selector {
    display: grid;
    gap: var(--cf-spacing);

    &__title {
        font-size: var(--cf-font-size-small);
        color: var(--cf-color-text-light);
    }

    &__items {
        display: flex;
        gap: var(--cf-spacing-tiny);
    }

    &__thumbnail-btn {
        border: var(--cf-border);
        border-radius: var(--cf-border-radius);
        padding: 0;
        overflow: hidden;

        &.selected {
            border-color: var(--cf-color-primary);
        }
    }
    
    &__thumbnail-image {
        width: 40px;
        height: 40px;
    }

    &__btn {
        font-size: var(--cf-font-size-small);
        padding: var(--cf-spacing-tiny) var(--cf-spacing-small);

        &.selected {
            opacity: 1;
            position: relative;
            color: var(--cf-color-primary);
            background-color: var(--cf-color-light);

            &::after {
                content: '';
                position: absolute;
                bottom: calc(var(--cf-spacing-tiny) * -1);
                left: 0;
                height: 2px;
                background: var(--cf-color-primary);;
                width: 100%;
                z-index: 1;
            }
        }
    }
}