:root {
    --primaryButton-height: var(--buttonsHeight);
    --buttonsFontSize: 16px;
}


/* PRIMARY BUTTON */
.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--primaryButton-height);
    min-height: var(--primaryButton-height);
    width: max-content;
    
    border-radius: var(--borderRadius-rounded);
    margin: 0;
    padding: 0;
    color: var(--primaryColor-light);
    background-color: var(--secondaryColor-blue);

    font-family: var(--fontFamily-primary);
    font-size: var(--buttonsFontSize);
    font-weight: 500;
}
.primary-button:disabled, .primary-button:disabled:hover {
    border: 1px solid var(--fillColor-dark-borderColor);
    background-color: var(--disabledColor-dark);
    color: var(--primaryColor-dark);
    opacity: 1;
    cursor: not-allowed;
}
.primary-button:hover {
    background-color: var(--secondaryColor-blue-hover);
    color: var(--primaryColor-light);
}


/* PRIMARY BUTTON */
.neutral-button-filled {
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--primaryButton-height);
    min-height: var(--primaryButton-height);
    width: max-content;
    
    border-radius: var(--borderRadius-rounded);
    margin: 0;
    padding: 0;
    color: var(--primaryColor-light);
    background-color: var(--primaryColor-dark);

    font-family: var(--fontFamily-primary);
    font-size: var(--buttonsFontSize);
    font-weight: 500;
}

.neutral-button-filled:hover {
    opacity: 0.8;
}


/* SECONDARY BUTTON */
.secondary-button {
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--primaryButton-height);
    min-height: var(--primaryButton-height);
    width: max-content;
    
    border-radius: var(--borderRadius-rounded);
    margin: 0;
    padding: 0;
    color: var(--primaryColor-light);
    background-color: var(--primaryColor-dark);

    font-family: var(--fontFamily-primary);
    font-size: var(--buttonsFontSize);
    font-weight: 500;
}

.secondary-button:hover {
    opacity: 0.8;
}