$button-standard-padding: 12px 24px; 
$button-color: rgba(16,16,16,0.4);
$button-color-dark: rgba(32,32,32,0.7);
$button-color-hover: rgba(55,55,55,0.7);
$button-color-disabled: rgba(16,16,16,0.1);
$button-border: 0.5px solid rgba(128,128,128,0.16);
$button-radius: 12px;
$button-shadow: 0px 0px 24px rgba(0,0,0,0.4);

.button {
    background-color: $button-color;
    padding: 8px;
    border-radius: $button-radius;
    border: $button-border;
    box-shadow: $button-shadow;
    transition: background-color 0.2s;

    &.dark {
        background-color: $button-color-dark;
    }

    &:hover {
        background-color: $button-color-hover;
    }
    
    &.disabled {
        pointer-events: none;
        background-color: $button-color-disabled;
        border: none;
        color: $text-color-darken;
    }
}


.warning {
    padding: 8px;
    border-radius: $button-radius;
    background-color: rgba( orange, 1 );
}

.success {
    padding: 8px;
    border-radius: $button-radius;
    background-color: rgba( green, 1 );
}

.blurple {
    padding: 8px;
    border-radius: $button-radius;
    background-color: rgba( $blurple, 1 );
    
    &:hover {
        background-color: rgba( $blurple, .50 );
    }
}