@use "../variable" as *;
@use "../mixin" as *;

.rbfb-top-level-wrapper {
    .rbfb-color-picker {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        &__wrapper {
            height: 36px;
            display: flex;
            border-radius: 4px;

            &-picker-box {
                width: 6rem;
                height: 100%;
                border: 1px solid $primary-light;
                cursor: pointer;
                border-radius: 4px 0 0 4px;
                background: transparent;

                &:focus {
                    @include no-focus-style;
                }

                &::-webkit-color-swatch-wrapper {
                    padding: 0;
                    border: none;
                }

                &::-webkit-color-swatch {
                    border: none;
                    border-radius: 4px 0 0 4px;
                }
            }

            &-picker-input {
                width: 6rem;
                height: 100%;
                padding: 0 0.5rem;
                border: 1px solid $primary-light;
                background-color: $white;
                color: $black;
                border-left: none;
                border-radius: 0 4px 4px 0;
                margin-left: -1px;
                min-height: 36px !important;

                &.error {
                    border-color: $error;
                }

                &:focus {
                    @include no-focus-style;
                }
            }
        }
    }

    .rbfb-color-box-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    .rbfb-color-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border: 1px solid $primary-light;
        border-radius: 4px;
        cursor: pointer;
        transition: border 0.2s;
    }
}
