/* This file changes Radzens default styles with that of Reglas styles 
    with accordance to our branding guide.
*/
:root {

    --rz-text-font-family: 'Barlow', ui-sans-serif, system-ui;
    /* Radzen uses --rz-base-100 for its default background color */
    --rz-base-100: var(--regla-background);
    --rz-warning: var(--regla-warning);
    --rz-border-radius: 4px;

    /* Primary */
    --rz-primary-lighter: var(--regla-primary-lighter);
    --rz-primary-light: var(--regla-primary-light);
    --rz-primary: var(--regla-primary);
    --rz-primary-dark: var(--regla-primary-dark);
    --rz-primary-darker: var(--regla-primary-darker);

    /* Secondary */
    --rz-secondary-lighter: var(--regla-secondary-lighter);
    --rz-secondary-light: var(--regla-secondary-light);
    --rz-secondary: var(--regla-secondary);
    --rz-secondary-dark: var(--regla-secondary-dark);
    --rz-secondary-darker: var(--regla-secondary-darker);

    /* Success */
    --rz-success-lighter: var(--regla-success-lighter);
    --rz-success-light: var(--regla-success-light);
    --rz-success: var(--regla-success);
    --rz-success-dark: var(--regla-success-dark);
    --rz-success-darker: var(--regla-success-darker);

    /* Warning */
    --rz-warning-lighter: var(--regla-warning-lighter);
    --rz-warning-light: var(--regla-warning-light);
    --rz-warning: var(--regla-warning);
    --rz-warning-dark: var(--regla-warning-dark);
    --rz-warning-darker: var(--regla-warning-darker);

    /* Danger */
    --rz-danger-lighter: var(--regla-error-lighter);
    --rz-danger-light: var(--regla-error-light);
    --rz-danger: var(--regla-error);
    --rz-danger-dark: var(--regla-error-dark);
    --rz-danger-darker: var(--regla-error-darker);

    /* Info */
    --rz-info-lighter: var(--regla-info-lighter);
    --rz-info-light: var(--regla-info-light);
    --rz-info: var(--regla-info);
    --rz-info-dark: var(--regla-info-dark);
    --rz-info-darker: var(--regla-info-darker);

    /* Base */
    --rz-base-lighter: var(--regla-neutral-lighter);
    --rz-base-light:var(--regla-neutral-light);
    --rz-base:var(--regla-neutral);
    --rz-base-dark:var(--regla-neutral-dark);
    --rz-base-darker:var(--regla-neutral-darker);
}

/* this will ensure that Dialogs always pop-up on top of side-dialogs 
   In Radzen we are limited to 1 open side dialogs while we can have many normal ones
   so normal ones always need to be on top.

   Note: overwriting --rz-dialog-zindex:1002 !important; does not seem to work
*/
.rz-dialog-wrapper
{
    z-index: 1002 !important;
}

/* Barlow is loaded in ReglaBranding.css, 
   remember also change the app.css file (if you have one) */
.rz-text {
    font-family: var(--rz-text-font-family);
}

/* ---- Buttons ----------*/
/* this style has to be used with Size="ButtonSize.Small" inorder to work 
   in some cases when you have same size buttons with outlined and filled color styles spaced out,
   it makes it look like the full color btns are larger so this reduces the size of the colored
   buttons to make it ''look'' more to be the same size (even thought it is).
*/
.custom-radzen-split-btn-semi-medium  > button
{
    margin-top:0.5em;
    height: 32px !important;
}
.custom-radzen-btn-semi-medium 
{
    margin-top:0.5em;
    height: 32px !important;
}

.regla-white-button
{
    background-color: transparent !important;
    border: 1px solid white;
    border-radius: 4px !important;
}

.regla-white-button > .rz-button-box > .rz-button-text {
    color: white !important;
    font-weight: 300 !important;
}

.regla-white-button:hover {
    border: 1px solid #ccc; 

}

.regla-white-button:hover > .rz-button-box > .rz-button-text {
    color: #ccc !important; 
    font-weight: 400 !important; 
}
/* ---- Secondary --------*/
.regla-secondary-button {
    background-color: var(--regla-secondary) !important;
}

.regla-secondary-button > .rz-button-box > .rz-button-text {
    color: black !important;
    font-weight: 300 !important;
}

.rz-notification-error .rz-notification-item {
    background-color: var(--regla-error-lighter) !important;
    color: var(--regla-error) !important;
}

.rz-notification-error > .rz-notification-item > .rz-notification-message-wrapper > .rz-notification-icon.rzi-times {
    color: var(--regla-error) !important;
}

/* These 3 lines remove all the borders from input fields and their icons, 
    this is to eseentially allow us to use the form itself as a readonly card
    saving us alot of time to from making readonly versions */
.custom-readonly-form-field-content .rz-form-field-content {
    border: none !important;
    box-shadow: none !important;
}

.custom-readonly-form-field-content .rz-form-field-content .rz-dropdown-trigger {
    display: none !important;
}

.custom-readonly-form-field-content .rz-form-field-content button {
   display: none !important;
}

.datagrid-action-btn-spacing
{
   margin-left: 0.2em;
   margin-right: 0.2em;
}

/* Use this on a ButtonStyle="ButtonStyle.Base" to darker content but a light border */
.base-style-but-with-light-border
{
    box-shadow: inset 0 0 0 var(--rz-border-width) var(--rz-base-200) !important;
}

/* use this class on TextStyle.Body1 */
.form-section-heading {
    color: var(--regla-primary);
    font-weight: 500;
    font-size:1.2em;
    margin-top:-0.5em;
    margin-bottom:0.2em;
}

/* ----- Confirm Dialog Styling for Deletion ----- 
   NOTE: Radzen does not offer the ability to change the button stylings of Confirm dialogs
         so we use CSS to change them instead of making our own custom confirm dialog. */
.ConfirmDialogForDelete > .rz-dialog-content > .rz-dialog-confirm-message
{   
    padding-bottom: 1em;
}
.ConfirmDialogForDelete > .rz-dialog-content > .rz-dialog-confirm-buttons button:first-child 
{
    background-color: var(--rz-danger);
    border-color: var(--rz-danger);
}
.ConfirmDialogForDelete > .rz-dialog-content > .rz-dialog-confirm-buttons button:nth-child(2) 
{
    background-color: var( --rz-base-light);
    border-color: var(--rz-base-dark);
}