Colorswatch

                @use "../abstracts/css-util";
@use "../abstracts/mixins";

.colorswatch {

    span {
        display: flex;
        font-family: css-util.get-var(select-field, font);
        color: css-util.get-var(select-field, text-color);
        font-size: css-util.get-var(select-field, text-size);
        align-items: center;
        gap: 1rem;
        font-weight: css-util.get-var(select-field, text-weight);
        width: 100%;

        &:before {
            content: '';
            border: 1px solid #E0E0E0;
            display: inline-block;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: #FFA755;
        }

    }

    &-orange {
        span {
            &:before {
                background: #FFA755;
            }
        }
    }

    &-black {
        span {
            &:before {
                background: #000;
            }
        }
    }

    &-red {
        span {
            &:before {
                background: #C60202;
            }
        }
    }

    &-green {
        span {
            &:before {
                background: #4aad19;
            }
        }
    }

    &-blue {
        span {
            &:before {
                background: #00008B;
            }
        }
    }

    &-gray {
        span {
            &:before {
                background: #a4a4a4;
            }
        }
    }

    &-yellow {
        span {
            &:before {
                background: #E7D212;
            }
        }
    }

    &-white {
        span {
            &:before {
                background: #fff;
            }
        }
    }

    &-purple {
        span {
            &:before {
                background: #680e9c;
            }
        }
    }

    &-pink {
        span {
            &:before {
                background: #ffc0cb;
            }
        }
    }
}