﻿/* ============================================================
   myButton
   ============================================================ */

/* Host custom element */
mybutton {
    display: inline-block;
    box-sizing: border-box;
}

    /* Bouton réel généré par le contrôle */
    mybutton > button.MyButton,
    button.MyButton,
    .MyButton {
        box-sizing: border-box;
        height: var(--zen-ctrl-height);
        min-height: var(--zen-ctrl-height);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0 var(--zen-ctrl-padding-x);
        border: 1px solid var(--zen-ctrl-border-color);
        border-radius: var(--zen-ctrl-radius);
        background: var(--zen-ctrl-bg);
        color: #1f2937;
        font-family: var(--zen-ctrl-font-family);
        font-size: var(--zen-ctrl-font-size);
        line-height: normal;
        white-space: nowrap;
        cursor: pointer;
        margin: 0;
        border: none;
        background: none;
        padding: 0;
    }

    /* Pleine largeur */
    mybutton.full-width,
    mybutton.full-width > button.MyButton {
        width: 100%;
    }

/* Disabled / readonly */
.MyButton:disabled,
.MyButton.is-readonly,
.MyButton:disabled.is-readonly {
    background: var(--zen-ctrl-disabled-bg);
    color: var(--zen-ctrl-disabled-color);
    cursor: not-allowed;
    opacity: 1;
}
