:is(.btn, .flat-button, .xIBLink, .xDialogButton) {
    display: flex;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    cursor: pointer;
    padding: var(--button-padding);
    border-width: var(--button-border-width);
    border-style: var(--button-border-style);
    border-color: var(--button-border-color);
    border-radius: var(--button-border-radius);
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    font-style: var(--button-font-style);
    font-stretch: var(--button-font-stretch);
    justify-content: var(--button-text-align);
    text-transform: var(--button-text-transform);
    line-height: var(--button-line-height);
    letter-spacing: var(--button-letter-spacing);
    word-spacing: var(--button-word-spacing);
}

:is(.btn, .flat-button, .xIBLink, .xDialogButton):hover {
    border-color: var(--button-border-color--hover);
    background-color: var(--button-background-color--hover);
    color: var(--button-text-color--hover);
}

:is(.btn, .flat-button, .xIBLink, .xDialogButton):active {
    border-color: var(--button-border-color--active);
    background-color: var(--button-background-color--active);
    color: var(--button-text-color--active);
}

:is(.btn, .flat-button, .xIBLink).disabled {
    border-color: var(--button-border-color--disabled);
    background-color: var(--button-background-color--hover--disabled);
    color: var(--button-text-color--hover--disabled);
}

:is(.btn, .flat-button, .xIBLink, .xDialogButton)::before {
    font-family: var(--font-family--icon);
    font-size: var(--icon-font-size);
}

.close-button {
    padding: var(--button-close-padding);
    background-color: var(--button-close-background-color);
    border-width: var(--button-close-border-width);
    border-style: var(--button-close-border-style);
    border-color: var(--button-close-border-color);
    border-radius: var(--button-close-border-radius);
}

.close-button::before,
.xDialogButton.close-button::before {
    content: var(--button-close-icon);
    font-family: var(--button-close-font-family);
    font-size:var(--button-close-font-size);
    color: var(--button-close-text-color);
}

.close-button:hover {
    background-color: var(--button-close-background-color--hover);
    border-color: var(--button-close-border-color--hover);
}

.close-button:hover::before,
.xDialogButton.close-button:hover::before {
    color: var(--button-close-text-color--hover);
}

.xBtns,
.btnBar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: var(--gap);
    cursor: pointer;
}

.xDialogButton[tabindex="1"] {
    order: 1;
}

.xDialogButton[tabindex="2"] {
    order: 2;
    margin-left: auto; /* Hack to create separation in the buttons */
}

.xDialogButton[tabindex="3"] {
    order: 3;
}

.xDialogButton:is([result="0"], [result="2"]) {
    min-width: var(--button-secondary-width-min);
    padding: var(--button-secondary-padding);
    border-width: var(--button-secondary-border-width);
    border-style: var(--button-secondary-border-style);
    border-color: var(--button-secondary-border-color);
    border-radius: var(--button-secondary-border-radius);
    background-color: var(--button-secondary-background-color);
    color: var(--button-secondary-text-color);
    font-family: var(--button-secondary-font-family);
    font-size: var(--button-secondary-font-size);
    font-weight: var(--button-secondary-font-weight);
    font-style: var(--button-secondary-font-style);
    font-stretch: var(--button-secondary-font-stretch);
    justify-content: var(--button-secondary-text-align);
    text-transform: var(--button-secondary-text-transform);
    line-height: var(--button-secondary-line-height);
    letter-spacing: var(--button-secondary-letter-spacing);
    word-spacing: var(--button-secondary-word-spacing);
}

.xDialogButton:is([result="0"], [result="2"]):hover {
    border-color: var(--button-secondary-border-color--hover);
    background-color: var(--button-secondary-background-color--hover);
    color: var(--button-secondary-text-color--hover);
}

.xDialogButton:is([result="0"], [result="2"]):active {
    border-color: var(--button-secondary-border-color--active);
    background-color: var(--button-secondary-background-color--active);
    color: var(--button-secondary-text-color--active);
}

.xDialogButton:is([result="1"], [result="3"]) {
    min-width: var(--button-primary-width-min);
    padding: var(--button-primary-padding);
    border-width: var(--button-primary-border-width);
    border-style: var(--button-primary-border-style);
    border-color: var(--button-primary-border-color);
    border-radius: var(--button-primary-border-radius);
    background-color: var(--button-primary-background-color);
    color: var(--button-primary-text-color);
    font-family: var(--button-primary-font-family);
    font-size: var(--button-primary-font-size);
    font-weight: var(--button-primary-font-weight);
    font-style: var(--button-primary-font-style);
    font-stretch: var(--button-primary-font-stretch);
    justify-content: var(--button-primary-text-align);
    text-transform: var(--button-primary-text-transform);
    line-height: var(--button-primary-line-height);
    letter-spacing: var(--button-primary-letter-spacing);
    word-spacing: var(--button-primary-word-spacing);
}

.xDialogButton:is([result="1"], [result="3"]):hover {
    border-color: var(--button-primary-border-color--hover);
    background-color: var(--button-primary-background-color--hover);
    color: var(--button-primary-text-color--hover);
}

.xDialogButton:is([result="1"], [result="3"]):active {
    border-color: var(--button-primary-border-color--active);
    background-color: var(--button-primary-background-color--active);
    color: var(--button-primary-text-color--active);
}

.xDialogButton[result="9"] {
    background-color: var(--background);
    color: var(--text-primary);
}

.xDialogButton[result="9"]:hover {
    background-color: var(--background-tone-100);
}

.xDialogButton[disabled="true"] {
    background-color: var(--disabled-secondary);
    color: var(--disabled-tertiary);
    cursor: not-allowed;
}

/* Needs to be organized
--------------------------------------------
--------------------------------------------
--------------------------------------------
-------------------------------------------- */

/* Action panel - Message */
.button-bar {
    display: flex;
    align-items: center;
}

.button-bar .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

/* Child config */
.xCCDropdown a[display='button'] { display: block; }
.xAMDropdown a[display='button'] { display: block; }


/* Diagnostics */
.xDiagSideBar .xDialogToggleButton {
    width: 60px;
    height: auto;
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    border-style: none;
    background-color: rgb(68, 97, 175);
    color: white;
    user-select: none;
}

.xDialogToggleButton[ischecked='true'] { background-color: lightsteelblue; }
.xDialogToggleButton[ischecked='true']:hover { background-color: #90a4be; }

.xDialogFixedFrame > .xDiagPanel > .xDiagToolbar > .xDialogButton[ischecked="true"] { background-color: #f3f3f3; }

.xDiagSideBar .xDialogToggleButton[istab] { text-align: right; width: 65px; }
.xDiagSideBar .xDialogToggleButton[istab][ischecked='true'] { background-color: white; color: rgb(68, 97, 175); }
.xDialogContainer[paneltype='4'] .xDiagSideBar { min-width: 80px; }
.xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab] { min-width: 65px; }

.xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType] { background-repeat: no-repeat; background-position: 5px, 5px; }
.xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='O'] { background-image: url('iconTokenOption.png'); }
.xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='S'] { background-image: url('iconTokenSelection.png'); }
.xDialogContainer[paneltype='4'] .xDiagSideBar .xDialogToggleButton[istab][instType='R'] { background-image: url('iconTokenRule.png'); }

.xDialogButtonSpacer { margin-right: 25px; }

.xDialogImageButton,
.xDiagTipButton {
    background-color: ghostwhite;
    border: solid 1px darkgrey;
}

.xDialogImageButton:hover,
.xDiagTipButton:hover,
.xDiagSideBar .xDialogToggleButton[ischecked='true']:hover {
    background-color: #efefef;
}