.swatch_container {
    .swatch {
        cursor: pointer;

        &.focus {
            outline: 2px solid #888;
        }

        button.delete {
            position: absolute;
            top: 5px;
            right: 5px;
            background: transparent;
            color: #000;
            border: none;
            cursor: pointer;
            font-size: 16px;
            line-height: 1;

            &:hover {
                font-weight: bold;
            }
        }
        &.dark button.delete {
            color: #fff;
        }

        .move-controls {
            position: absolute;
            top: 5px;
            left: 5px;
            display: flex;
            gap: 2px;

            button {
                background: transparent;
                color: #000;
                border: none;
                cursor: pointer;
                font-size: 14px;
                line-height: 1;
                padding: 2px;
                border-radius: 2px;

                &:hover {
                    font-weight: bold;
                }
            }
        }

        &.dark .move-controls button {
            color: #fff;
        }
    }

    button.add_swatch {
        align-self: center;
    }
}

button.calculate {
    font-size: 12px;
    padding: 8px !important;
    text-decoration: none !important;

    &:hover {
        background-color: rgba(var(--wp-admin-theme-color--rgb), .04);
    }
}