@import "mixins";
@import "variables";

.matching-products {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .matching-products__title {
        font-size: 13px;
    }

    .matching-products__items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;

        .matching-products__item {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.4s;

            .matching-products__swatch-container {
                position: relative;
                display: flex;
                position: relative;
                border-radius: 50%;
                width: 34px;
                min-width: 34px;
                min-height: 34px;
                height: 34px;

                justify-content: center;
                align-items: center;


                .matching-products__swatch {
                    width: 34px;
                    height: 34px;
                    min-width: 34px;
                    min-height: 34px;
                    border-radius: 50%;
                    background-color: var(--color1);
                    border: 1px solid #ccc;


                    &.matching-products__swatch--split {
                        background: conic-gradient(from 270deg,
                                var(--color1) 0deg 180deg,
                                var(--color2) 180deg 360deg);
                    }

                    &.matching-products__swatch--img {
                        width: 34px;
                        height: 34px;
                        min-width: 34px;
                        min-height: 34px;
                        border-radius: 50%;
                        object-fit: cover;
                        display: flex;
                        justify-content: center;
                        align-items: center;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 50%;
                            object-position: center;

                        }
                    }

                }

            }


            &.matching-products__item--selected {
                outline: 1px solid #000000;
                position: relative;
                border-radius: 50%;
                width: 34px;
                height: 34px;

                .matching-products__swatch {
                    width: 30px;
                    height: 30px;
                    min-width: 30px;
                    min-height: 30px;

                    &.matching-products__swatch--img {
                        width: 30px;
                        height: 30px;
                        min-width: 30px;
                        min-height: 30px;
                    }
                }

                .matching-products__swatch-container {
                    border: 1px solid #ffffff;
                }

                .matching-products__swatch {
                    border: none;
                    outline: 1px solid #ccc;
                }
            }

        }
    }

    &.matching-products--border {
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 1.5rem;
    }


}