@import "dxHelpers/reset";

button {
    border: 2px solid var(--dx-g-gray-50);
    border-radius: 4px;
    color: var(--dx-g-gray-50);
    font-family: var(--dx-g-font-sans);
    font-size: var(--dx-g-text-sm);
    font-weight: var(--dx-g-font-bold);
    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-smd);
}

button:focus {
    outline: 5px solid var(--dx-g-blue-vibrant-60);
    border-color: var(--dx-g-blue-vibrant-50);
}

button:hover {
    border-color: var(--dx-g-blue-vibrant-20);
}

button:focus,
button:hover {
    background-color: var(--dx-g-blue-vibrant-95);
    color: var(--dx-g-blue-vibrant-20);
}

button:disabled,
button:disabled:hover {
    background-color: var(--dx-g-gray-80);
    border-color: var(--dx-g-gray-80);
    color: white;
    cursor: default;
}

button:focus:hover {
    border-color: var(--dx-g-blue-vibrant-50);
}

.label-container {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pressed {
    background-color: var(--sds-g-gray-14);
    border-color: var(--sds-g-gray-14);
    color: white;
}