.simple-color-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: sans-serif;

    &__colors {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    $button-size: 30px;
    &__color-button {
        width: $button-size;
        height: $button-size;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        border-radius: 50%;
        // transition: outline 0.2s ease;

        &.is-selected {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }
    }

    &__clear {
        padding: 4px 8px;
        font-size: 12px;
        background: #f5f5f5;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        align-self: flex-start;

        &:hover {
            background: #e6e6e6;
        }
    }
}

.scp-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scp-color-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scp-color-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    outline: none;
    transition: outline-color 0.2s ease;

    &:hover {
        transform: scale(1.05);
    }

    &.scp-selected {
        outline: 2px solid #fff; // selection outline
        outline-offset: 2px;
    }
}

.scp-clear-btn {
    background: transparent;
    border: 1px solid #ccc;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    align-self: flex-start;

    &:hover {
        background: #f0f0f0;
    }
}
