/* ==========================================================
   AYW DESIGN SYSTEM
   COMPONENTS / BUTTONS

   Responsabilidades:
   - botão base;
   - variantes visuais;
   - variantes semânticas;
   - tamanhos;
   - largura e alinhamento;
   - botões com ícone;
   - botão somente com ícone;
   - botão circular;
   - grupos de botões;
   - estados ativo, selecionado, desabilitado e carregando.

   O spinner utilizado no carregamento pertence a:
   components/loaders.css
   ========================================================== */


/* ==========================================================
   BOTÃO BASE

   Variáveis internas permitem que cada variante altere
   apenas aparência, sem repetir toda a estrutura.
   ========================================================== */

.ayw-btn {
    --ayw-btn-min-height: 44px;
    --ayw-btn-padding-y: 0.75rem;
    --ayw-btn-padding-x: 1.25rem;
    --ayw-btn-radius: var(--ayw-radius-md);

    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-bg-soft);
    --ayw-btn-bg-active: var(--ayw-bg-muted);

    --ayw-btn-color: var(--ayw-text);
    --ayw-btn-color-hover: var(--ayw-text);
    --ayw-btn-color-active: var(--ayw-text);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow: none;
    --ayw-btn-shadow-hover: var(--ayw-shadow-sm);
    --ayw-btn-shadow-active: var(--ayw-shadow-xs);

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 0;
    min-height: var(--ayw-btn-min-height);

    gap: var(--ayw-space-2);

    margin: 0;
    padding:
        var(--ayw-btn-padding-y)
        var(--ayw-btn-padding-x);

    border: 1px solid var(--ayw-btn-border);
    border-radius: var(--ayw-btn-radius);

    background: var(--ayw-btn-bg);
    color: var(--ayw-btn-color);

    box-shadow: var(--ayw-btn-shadow);

    cursor: pointer;

    font: inherit;
    font-size: var(--ayw-font-size-sm);
    font-weight: var(--ayw-font-weight-semibold);
    line-height: 1;

    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;

    user-select: none;
    touch-action: manipulation;

    appearance: none;

    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background-color var(--ayw-transition-fast),
        border-color var(--ayw-transition-fast),
        color var(--ayw-transition-fast),
        box-shadow var(--ayw-transition-fast),
        filter var(--ayw-transition-fast),
        opacity var(--ayw-transition-fast),
        transform var(--ayw-transition-fast);
}


/* ==========================================================
   ESTADOS BASE
   ========================================================== */

.ayw-btn:hover {
    border-color: var(--ayw-btn-border-hover);

    background: var(--ayw-btn-bg-hover);
    color: var(--ayw-btn-color-hover);

    box-shadow: var(--ayw-btn-shadow-hover);

    text-decoration: none;

    transform: translateY(-1px);
}

.ayw-btn:active {
    border-color: var(--ayw-btn-border-active);

    background: var(--ayw-btn-bg-active);
    color: var(--ayw-btn-color-active);

    box-shadow: var(--ayw-btn-shadow-active);

    transform: translateY(0);
}

.ayw-btn:focus-visible {
    outline: 3px solid var(--ayw-focus-ring);
    outline-offset: 2px;
}


/* ==========================================================
   VARIANTE PRIMÁRIA
   ========================================================== */

.ayw-btn-primary {
    --ayw-btn-bg: var(--ayw-primary);
    --ayw-btn-bg-hover: var(--ayw-primary-hover);
    --ayw-btn-bg-active: var(--ayw-primary-active);

    --ayw-btn-color: #ffffff;
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-primary);
    --ayw-btn-border-hover: var(--ayw-primary-hover);
    --ayw-btn-border-active: var(--ayw-primary-active);
}


/* ==========================================================
   VARIANTE SECUNDÁRIA
   ========================================================== */

.ayw-btn-secondary {
    --ayw-btn-bg: var(--ayw-surface);
    --ayw-btn-bg-hover: var(--ayw-bg-soft);
    --ayw-btn-bg-active: var(--ayw-bg-muted);

    --ayw-btn-color: var(--ayw-text);
    --ayw-btn-color-hover: var(--ayw-text);
    --ayw-btn-color-active: var(--ayw-text);

    --ayw-btn-border: var(--ayw-border);
    --ayw-btn-border-hover: var(--ayw-border-strong);
    --ayw-btn-border-active: var(--ayw-border-strong);
}


/* ==========================================================
   VARIANTE OUTLINE
   ========================================================== */

.ayw-btn-outline {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-primary-soft);
    --ayw-btn-bg-active: var(--ayw-primary-soft);

    --ayw-btn-color: var(--ayw-primary);
    --ayw-btn-color-hover: var(--ayw-primary-hover);
    --ayw-btn-color-active: var(--ayw-primary-active);

    --ayw-btn-border: var(--ayw-primary);
    --ayw-btn-border-hover: var(--ayw-primary-hover);
    --ayw-btn-border-active: var(--ayw-primary-active);
}


/* ==========================================================
   VARIANTE SOFT
   ========================================================== */

.ayw-btn-soft {
    --ayw-btn-bg: var(--ayw-primary-soft);
    --ayw-btn-bg-hover: var(--ayw-primary);
    --ayw-btn-bg-active: var(--ayw-primary-active);

    --ayw-btn-color: var(--ayw-primary);
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-primary-border);
    --ayw-btn-border-hover: var(--ayw-primary);
    --ayw-btn-border-active: var(--ayw-primary-active);
}


/* ==========================================================
   VARIANTE GHOST
   ========================================================== */

.ayw-btn-ghost {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-bg-soft);
    --ayw-btn-bg-active: var(--ayw-bg-muted);

    --ayw-btn-color: var(--ayw-text-soft);
    --ayw-btn-color-hover: var(--ayw-text);
    --ayw-btn-color-active: var(--ayw-text);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}


/* ==========================================================
   VARIANTE LINK
   ========================================================== */

.ayw-btn-link {
    --ayw-btn-min-height: auto;
    --ayw-btn-padding-y: 0;
    --ayw-btn-padding-x: 0;

    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: transparent;
    --ayw-btn-bg-active: transparent;

    --ayw-btn-color: var(--ayw-primary);
    --ayw-btn-color-hover: var(--ayw-primary-hover);
    --ayw-btn-color-active: var(--ayw-primary-active);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow: none;
    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;

    border-radius: var(--ayw-radius-sm);
}

.ayw-btn-link:hover {
    text-decoration: underline;

    transform: none;
}

.ayw-btn-link:active {
    transform: none;
}


/* ==========================================================
   VARIANTES SEMÂNTICAS SÓLIDAS
   ========================================================== */

.ayw-btn-success {
    --ayw-btn-bg: var(--ayw-success);
    --ayw-btn-bg-hover: var(--ayw-success);
    --ayw-btn-bg-active: var(--ayw-success);

    --ayw-btn-color: #ffffff;
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-success);
    --ayw-btn-border-hover: var(--ayw-success);
    --ayw-btn-border-active: var(--ayw-success);
}

.ayw-btn-danger {
    --ayw-btn-bg: var(--ayw-danger);
    --ayw-btn-bg-hover: var(--ayw-danger);
    --ayw-btn-bg-active: var(--ayw-danger);

    --ayw-btn-color: #ffffff;
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-danger);
    --ayw-btn-border-hover: var(--ayw-danger);
    --ayw-btn-border-active: var(--ayw-danger);
}

.ayw-btn-warning {
    --ayw-btn-bg: var(--ayw-warning);
    --ayw-btn-bg-hover: var(--ayw-warning);
    --ayw-btn-bg-active: var(--ayw-warning);

    --ayw-btn-color: #ffffff;
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-warning);
    --ayw-btn-border-hover: var(--ayw-warning);
    --ayw-btn-border-active: var(--ayw-warning);
}

.ayw-btn-info {
    --ayw-btn-bg: var(--ayw-info);
    --ayw-btn-bg-hover: var(--ayw-info);
    --ayw-btn-bg-active: var(--ayw-info);

    --ayw-btn-color: #ffffff;
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: var(--ayw-info);
    --ayw-btn-border-hover: var(--ayw-info);
    --ayw-btn-border-active: var(--ayw-info);
}

.ayw-btn-success:hover,
.ayw-btn-danger:hover,
.ayw-btn-warning:hover,
.ayw-btn-info:hover {
    filter: brightness(0.94);
}

.ayw-btn-success:active,
.ayw-btn-danger:active,
.ayw-btn-warning:active,
.ayw-btn-info:active {
    filter: brightness(0.88);
}


/* ==========================================================
   VARIANTES SEMÂNTICAS SOFT
   ========================================================== */

.ayw-btn-soft-success {
    --ayw-btn-bg: var(--ayw-success-soft);
    --ayw-btn-bg-hover: var(--ayw-success);
    --ayw-btn-bg-active: var(--ayw-success);

    --ayw-btn-color: var(--ayw-success);
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: var(--ayw-success);
    --ayw-btn-border-active: var(--ayw-success);
}

.ayw-btn-soft-danger {
    --ayw-btn-bg: var(--ayw-danger-soft);
    --ayw-btn-bg-hover: var(--ayw-danger);
    --ayw-btn-bg-active: var(--ayw-danger);

    --ayw-btn-color: var(--ayw-danger);
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: var(--ayw-danger);
    --ayw-btn-border-active: var(--ayw-danger);
}

.ayw-btn-soft-warning {
    --ayw-btn-bg: var(--ayw-warning-soft);
    --ayw-btn-bg-hover: var(--ayw-warning);
    --ayw-btn-bg-active: var(--ayw-warning);

    --ayw-btn-color: var(--ayw-warning);
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: var(--ayw-warning);
    --ayw-btn-border-active: var(--ayw-warning);
}

.ayw-btn-soft-info {
    --ayw-btn-bg: var(--ayw-info-soft);
    --ayw-btn-bg-hover: var(--ayw-info);
    --ayw-btn-bg-active: var(--ayw-info);

    --ayw-btn-color: var(--ayw-info);
    --ayw-btn-color-hover: #ffffff;
    --ayw-btn-color-active: #ffffff;

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: var(--ayw-info);
    --ayw-btn-border-active: var(--ayw-info);
}


/* ==========================================================
   VARIANTES SEMÂNTICAS OUTLINE
   ========================================================== */

.ayw-btn-outline-success {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-success-soft);
    --ayw-btn-bg-active: var(--ayw-success-soft);

    --ayw-btn-color: var(--ayw-success);
    --ayw-btn-color-hover: var(--ayw-success);
    --ayw-btn-color-active: var(--ayw-success);

    --ayw-btn-border: var(--ayw-success);
    --ayw-btn-border-hover: var(--ayw-success);
    --ayw-btn-border-active: var(--ayw-success);
}

.ayw-btn-outline-danger {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-danger-soft);
    --ayw-btn-bg-active: var(--ayw-danger-soft);

    --ayw-btn-color: var(--ayw-danger);
    --ayw-btn-color-hover: var(--ayw-danger);
    --ayw-btn-color-active: var(--ayw-danger);

    --ayw-btn-border: var(--ayw-danger);
    --ayw-btn-border-hover: var(--ayw-danger);
    --ayw-btn-border-active: var(--ayw-danger);
}

.ayw-btn-outline-warning {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-warning-soft);
    --ayw-btn-bg-active: var(--ayw-warning-soft);

    --ayw-btn-color: var(--ayw-warning);
    --ayw-btn-color-hover: var(--ayw-warning);
    --ayw-btn-color-active: var(--ayw-warning);

    --ayw-btn-border: var(--ayw-warning);
    --ayw-btn-border-hover: var(--ayw-warning);
    --ayw-btn-border-active: var(--ayw-warning);
}

.ayw-btn-outline-info {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-info-soft);
    --ayw-btn-bg-active: var(--ayw-info-soft);

    --ayw-btn-color: var(--ayw-info);
    --ayw-btn-color-hover: var(--ayw-info);
    --ayw-btn-color-active: var(--ayw-info);

    --ayw-btn-border: var(--ayw-info);
    --ayw-btn-border-hover: var(--ayw-info);
    --ayw-btn-border-active: var(--ayw-info);
}


/* ==========================================================
   VARIANTES SEMÂNTICAS GHOST
   ========================================================== */

.ayw-btn-ghost-success {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-success-soft);
    --ayw-btn-bg-active: var(--ayw-success-soft);

    --ayw-btn-color: var(--ayw-success);
    --ayw-btn-color-hover: var(--ayw-success);
    --ayw-btn-color-active: var(--ayw-success);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}

.ayw-btn-ghost-danger {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-danger-soft);
    --ayw-btn-bg-active: var(--ayw-danger-soft);

    --ayw-btn-color: var(--ayw-danger);
    --ayw-btn-color-hover: var(--ayw-danger);
    --ayw-btn-color-active: var(--ayw-danger);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}

.ayw-btn-ghost-warning {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-warning-soft);
    --ayw-btn-bg-active: var(--ayw-warning-soft);

    --ayw-btn-color: var(--ayw-warning);
    --ayw-btn-color-hover: var(--ayw-warning);
    --ayw-btn-color-active: var(--ayw-warning);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}

.ayw-btn-ghost-info {
    --ayw-btn-bg: transparent;
    --ayw-btn-bg-hover: var(--ayw-info-soft);
    --ayw-btn-bg-active: var(--ayw-info-soft);

    --ayw-btn-color: var(--ayw-info);
    --ayw-btn-color-hover: var(--ayw-info);
    --ayw-btn-color-active: var(--ayw-info);

    --ayw-btn-border: transparent;
    --ayw-btn-border-hover: transparent;
    --ayw-btn-border-active: transparent;

    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}


/* ==========================================================
   TAMANHOS

   O tamanho padrão possui 44px.
   Não existe .ayw-btn-md porque seria redundante.
   ========================================================== */

.ayw-btn-xs {
    --ayw-btn-min-height: 32px;
    --ayw-btn-padding-y: 0.45rem;
    --ayw-btn-padding-x: 0.75rem;

    gap: var(--ayw-space-1);

    font-size: var(--ayw-font-size-xs);
}

.ayw-btn-sm {
    --ayw-btn-min-height: 38px;
    --ayw-btn-padding-y: 0.60rem;
    --ayw-btn-padding-x: 1rem;

    font-size: 0.85rem;
}

.ayw-btn-lg {
    --ayw-btn-min-height: 52px;
    --ayw-btn-padding-y: 1rem;
    --ayw-btn-padding-x: 1.5rem;

    font-size: var(--ayw-font-size-md);
}


/* ==========================================================
   LARGURA E FLEXIBILIDADE
   ========================================================== */

.ayw-btn-block {
    width: 100%;
}

.ayw-btn-grow {
    flex: 1 1 auto;
}

.ayw-btn-shrink {
    flex: 0 1 auto;
}

.ayw-btn-auto {
    width: auto;
}


/* ==========================================================
   ALINHAMENTO DO CONTEÚDO
   ========================================================== */

.ayw-btn-start {
    justify-content: flex-start;

    text-align: left;
}

.ayw-btn-end {
    justify-content: flex-end;

    text-align: right;
}

.ayw-btn-between {
    justify-content: space-between;
}

.ayw-btn-reverse {
    flex-direction: row-reverse;
}


/* ==========================================================
   ÍCONES
   ========================================================== */

.ayw-btn-icon {
    display: inline-grid;
    place-items: center;

    flex: 0 0 auto;

    width: 1em;
    height: 1em;

    color: currentColor;

    line-height: 1;
}

.ayw-btn-icon svg,
.ayw-btn-icon img {
    display: block;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   BOTÃO SOMENTE COM ÍCONE
   ========================================================== */

.ayw-btn-icon-only {
    width: var(--ayw-btn-min-height);
    min-width: var(--ayw-btn-min-height);

    padding: 0;
}

.ayw-btn-round {
    --ayw-btn-radius: var(--ayw-radius-pill);
}

.ayw-btn-icon-only.ayw-btn-round {
    border-radius: 50%;
}


/* ==========================================================
   CONTEÚDO DO BOTÃO
   ========================================================== */

.ayw-btn-label {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================
   CONTEÚDO FINAL

   Útil para contador, atalho ou seta posicionada no fim.
   ========================================================== */

.ayw-btn-end-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-left: auto;

    color: currentColor;

    line-height: 1;
}


/* ==========================================================
   CONTADOR OU BADGE INTERNO
   ========================================================== */

.ayw-btn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 18px;
    height: 18px;

    padding:
        0
        0.35rem;

    border-radius: var(--ayw-radius-pill);

    background: currentColor;

    font-size: 0.625rem;
    font-weight: var(--ayw-font-weight-bold);
    line-height: 1;
}

.ayw-btn-badge > span {
    color: var(--ayw-surface);
}


/* ==========================================================
   BOTÃO ELEVADO E BOTÃO FLAT
   ========================================================== */

.ayw-btn-elevated {
    --ayw-btn-shadow: var(--ayw-shadow-sm);
    --ayw-btn-shadow-hover: var(--ayw-shadow-md);
    --ayw-btn-shadow-active: var(--ayw-shadow-xs);
}

.ayw-btn-flat {
    --ayw-btn-shadow: none;
    --ayw-btn-shadow-hover: none;
    --ayw-btn-shadow-active: none;
}


/* ==========================================================
   ESTADO ATIVO OU SELECIONADO
   ========================================================== */

.ayw-btn.is-active,
.ayw-btn[aria-pressed="true"],
.ayw-btn[aria-current="true"],
.ayw-btn[aria-selected="true"] {
    border-color: var(--ayw-btn-border-active);

    background: var(--ayw-btn-bg-active);
    color: var(--ayw-btn-color-active);

    box-shadow: var(--ayw-btn-shadow-active);
}


/* ==========================================================
   ESTADO DESABILITADO
   ========================================================== */

.ayw-btn:disabled,
.ayw-btn.is-disabled,
.ayw-btn[aria-disabled="true"] {
    cursor: not-allowed;

    opacity: 0.55;

    pointer-events: none;

    filter: none;
    transform: none;
}

.ayw-btn:disabled:hover,
.ayw-btn.is-disabled:hover,
.ayw-btn[aria-disabled="true"]:hover {
    border-color: var(--ayw-btn-border);

    background: var(--ayw-btn-bg);
    color: var(--ayw-btn-color);

    box-shadow: var(--ayw-btn-shadow);

    filter: none;
    transform: none;
}


/* ==========================================================
   ESTADO DE CARREGAMENTO

   Estrutura recomendada:

   <button class="ayw-btn ayw-btn-primary is-loading">
     <span
       class="ayw-spinner ayw-spinner-sm ayw-spinner-light"
       aria-hidden="true"
     ></span>

     <span class="ayw-btn-label">
       Salvando
     </span>
   </button>
   ========================================================== */

.ayw-btn.is-loading {
    cursor: wait;

    opacity: 0.80;

    pointer-events: none;

    filter: none;
    transform: none;
}

.ayw-btn.is-loading:hover,
.ayw-btn.is-loading:active {
    border-color: var(--ayw-btn-border);

    background: var(--ayw-btn-bg);
    color: var(--ayw-btn-color);

    box-shadow: var(--ayw-btn-shadow);

    filter: none;
    transform: none;
}

.ayw-btn.is-loading .ayw-btn-label {
    opacity: 0.85;
}

.ayw-btn.is-loading .ayw-spinner {
    flex: 0 0 auto;
}


/* ==========================================================
   GRUPO DE BOTÕES

   Estrutura:

   <div class="ayw-btn-group">
     <button class="ayw-btn ayw-btn-secondary">Dia</button>
     <button class="ayw-btn ayw-btn-secondary">Semana</button>
     <button class="ayw-btn ayw-btn-secondary">Mês</button>
   </div>
   ========================================================== */

.ayw-btn-group {
    display: inline-flex;
    align-items: stretch;

    min-width: 0;

    vertical-align: middle;
}

.ayw-btn-group > .ayw-btn {
    position: relative;

    border-radius: 0;
}

.ayw-btn-group > .ayw-btn:first-child {
    border-top-left-radius: var(--ayw-radius-md);
    border-bottom-left-radius: var(--ayw-radius-md);
}

.ayw-btn-group > .ayw-btn:last-child {
    border-top-right-radius: var(--ayw-radius-md);
    border-bottom-right-radius: var(--ayw-radius-md);
}

.ayw-btn-group > .ayw-btn + .ayw-btn {
    margin-left: -1px;
}

.ayw-btn-group > .ayw-btn:hover,
.ayw-btn-group > .ayw-btn:focus-visible,
.ayw-btn-group > .ayw-btn.is-active,
.ayw-btn-group > .ayw-btn[aria-pressed="true"] {
    z-index: 1;
}


/* ==========================================================
   GRUPO VERTICAL
   ========================================================== */

.ayw-btn-group-vertical {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;

    min-width: 0;
}

.ayw-btn-group-vertical > .ayw-btn {
    position: relative;

    width: 100%;

    border-radius: 0;
}

.ayw-btn-group-vertical > .ayw-btn:first-child {
    border-top-left-radius: var(--ayw-radius-md);
    border-top-right-radius: var(--ayw-radius-md);
}

.ayw-btn-group-vertical > .ayw-btn:last-child {
    border-bottom-right-radius: var(--ayw-radius-md);
    border-bottom-left-radius: var(--ayw-radius-md);
}

.ayw-btn-group-vertical > .ayw-btn + .ayw-btn {
    margin-top: -1px;
}

.ayw-btn-group-vertical > .ayw-btn:hover,
.ayw-btn-group-vertical > .ayw-btn:focus-visible,
.ayw-btn-group-vertical > .ayw-btn.is-active,
.ayw-btn-group-vertical > .ayw-btn[aria-pressed="true"] {
    z-index: 1;
}


/* ==========================================================
   CONJUNTO DE AÇÕES

   Diferente do grupo unido, mantém espaçamento entre botões.
   ========================================================== */

.ayw-btn-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    min-width: 0;

    gap: var(--ayw-space-3);
}

.ayw-btn-actions.is-end {
    justify-content: flex-end;
}

.ayw-btn-actions.is-center {
    justify-content: center;
}

.ayw-btn-actions.is-between {
    justify-content: space-between;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767.98px) {
    .ayw-btn-sm {
        min-height: var(--ayw-control-height-md);
    }

    .ayw-btn-actions-mobile-stack {
        flex-direction: column;
        align-items: stretch;
    }

    .ayw-btn-actions-mobile-stack > .ayw-btn {
        width: 100%;
    }

    .ayw-btn-group-mobile-scroll {
        display: flex;

        width: 100%;

        overflow-x: auto;
        overflow-y: hidden;

        overscroll-behavior-inline: contain;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .ayw-btn-group-mobile-scroll::-webkit-scrollbar {
        display: none;
    }

    .ayw-btn-group-mobile-scroll > .ayw-btn {
        flex: 0 0 auto;
    }
}


/* ==========================================================
   MOVIMENTO REDUZIDO
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .ayw-btn {
        transition: none;
    }

    .ayw-btn:hover,
    .ayw-btn:active {
        transform: none;
    }
}