.paint-control {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: fixed;
    top: 238px;
    max-width: 252px;
    background: var(--on-backgroud-color);
    padding: 24px;
    border-radius: var(--primary-border-radius);
    z-index: 2000;
}

.paint-control.single-control {
    top: 24px;
}

.paint-control #draw-button {
    width: 100%;
    min-width: calc(141px - 24px);
}

.paint-control #draw-button p {
    margin-left: auto;
    margin-right: auto;
}

.paint-control .divider{
    width: 100%;
    height: 1px;
    background: var(--input-border-color);
}


.paint-setting-panel{
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 16px;
}

.paint-control h4 {
    margin: 0;
    margin-right: auto;
    color: var(--black-846);
    font-weight: 600;
    font-size: 16px;
}

.color-button {
    height: calc(35px - 8px);
    width: calc(35px - 8px);
    border-radius: 8px;
    outline: 1px solid var(--secondary-text-color);

    border: 3px solid var(--on-backgroud-color);
    transition: all 0.3s;
    cursor: pointer;
}

.color-button:hover{
    outline: 1px solid var(--on-accent-light-background-color);
}

.color-button.selected {
    outline: 1px solid var(--on-accent-light-background-color);
}


#black-color {
    background: var(--black-700);
}

#yellow-color {
    background: var(--yellow-500);
}

#red-color {
    background: var(--red-500);
}

#blue-color {
    background: var(--on-accent-light-background-color);
}

#green-color {
    background: var(--green-600);
}