.app-button{all:unset;position:relative;background:var(--primary-color);padding:8px 20px;line-height:24px;font-size:16px;color:#fff;display:inline-flex;align-items:center;border-radius:var(--radius-sm);justify-content:center;gap:6px;cursor:pointer;transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out);border:1px solid var(--primary-color);box-shadow:var(--shadow-sm)}@media(min-width:1024px){.app-button{padding:11px 22px;font-size:18px;line-height:26px}}.app-button:hover{background:var(--primary-color-dark);border:1px solid var(--primary-color-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.app-button:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.app-button:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.app-button--secondary,.app-button--tertiary{box-shadow:none}.app-button--secondary:hover,.app-button--tertiary:hover{box-shadow:none;transform:none}.app-button__loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.app-button__content{display:flex;align-items:center;justify-content:center;gap:6px}.app-button__content--loading{opacity:0}.app-button--disabled,.app-button--loading{pointer-events:none}.app-button--secondary{color:var(--primary-color);background:none;border:1px solid var(--primary-color)}.app-button--secondary:hover{background:none;color:var(--primary-color-dark)}.app-button--tertiary{color:var(--primary-color);background:none;border:1px solid transparent}.app-button--tertiary:hover{background:none;border:1px solid transparent;color:var(--primary-color-dark)}.app-button--inverted.app-button{background:var(--color-grey);color:var(--primary-color);border:1px solid var(--color-grey)}.app-button--inverted.app-button:hover{background:var(--color-grey-mild);border:1px solid var(--color-grey-mild)}.app-button--inverted.app-button--secondary{background:none;color:var(--color-grey);border:1px solid var(--color-grey)}.app-button--inverted.app-button--secondary:hover{background:none;color:var(--color-grey-mild);border:1px solid var(--color-grey-mild)}.app-button--inverted.app-button--tertiary{background:none;color:var(--color-grey);border:1px solid transparent}.app-button--inverted.app-button--tertiary:hover{background:transparent;border:1px solid transparent;color:var(--color-grey-mild)}
