.ir-btn {
    --ir-btn-height: auto;
    --ir-btn-min-height: 40px;
    --ir-btn-padding-x: 13px;
    --ir-btn-padding-y: 9px;
    --ir-btn-font-size: 13px;
    --ir-btn-font-weight: 600;
    --ir-btn-line-height: normal;
    --ir-btn-gap: 6px;
    --ir-btn-radius: 9px;
    --ir-btn-bg: #fff;
    --ir-btn-color: #455267;
    --ir-btn-border-color: #e5e1dc;
    --ir-btn-hover-bg: #fff;
    --ir-btn-hover-color: #ff6810;
    --ir-btn-hover-border-color: #f3c9b0;
    --ir-btn-active-bg: #fff;
    --ir-btn-active-color: #455267;
    --ir-btn-active-border-color: #e5e1dc;
    --ir-btn-focus-color: #d7dce4;
    --ir-btn-focus-shadow: none;
    --ir-btn-disabled-bg: var(--ir-btn-bg);
    --ir-btn-disabled-color: var(--ir-btn-color);
    --ir-btn-disabled-border-color: var(--ir-btn-border-color);
    --ir-btn-disabled-opacity: .55;
    --ir-btn-shadow: none;
    --ir-btn-hover-shadow: var(--ir-btn-shadow);
    --ir-btn-active-shadow: none;
    --ir-btn-hover-transform: none;
    --ir-btn-active-transform: none;
    --ir-btn-transition-duration: .4s;
    --ir-btn-transition-easing: ease;

    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ir-btn-gap);
    width: auto;
    height: var(--ir-btn-height);
    min-height: var(--ir-btn-min-height);
    padding: var(--ir-btn-padding-y) var(--ir-btn-padding-x);
    border: 1px solid var(--ir-btn-border-color);
    border-radius: var(--ir-btn-radius);
    appearance: none;
    background: var(--ir-btn-bg);
    color: var(--ir-btn-color);
    box-shadow: var(--ir-btn-shadow);
    cursor: pointer;
    font: inherit;
    font-size: var(--ir-btn-font-size);
    font-weight: var(--ir-btn-font-weight);
    line-height: var(--ir-btn-line-height);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    transition:
        background-color var(--ir-btn-transition-duration) var(--ir-btn-transition-easing),
        border-color var(--ir-btn-transition-duration) var(--ir-btn-transition-easing),
        color var(--ir-btn-transition-duration) var(--ir-btn-transition-easing),
        box-shadow var(--ir-btn-transition-duration) var(--ir-btn-transition-easing),
        transform var(--ir-btn-transition-duration) var(--ir-btn-transition-easing);
}

.ir-btn:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--ir-btn-hover-border-color);
    background: var(--ir-btn-hover-bg);
    color: var(--ir-btn-hover-color);
    box-shadow: var(--ir-btn-hover-shadow);
    transform: var(--ir-btn-hover-transform);
}

.ir-btn:active:not(:disabled):not([aria-disabled="true"]) {
    border-color: var(--ir-btn-active-border-color);
    background: var(--ir-btn-active-bg);
    color: var(--ir-btn-active-color);
    box-shadow: var(--ir-btn-active-shadow);
    transform: var(--ir-btn-active-transform);
}

.ir-btn:focus {
    outline: none;
}

/*
 * A pointer click gives a button focus.  Some theme styles also color focused
 * buttons, which made that color persist after the pointer was released.
 * Restore the base variant values for pointer focus; keyboard focus continues
 * to receive the accessible focus-visible indicator below.
 */
.ir-btn:focus:not(:focus-visible) {
    border-color: var(--ir-btn-border-color);
    background: var(--ir-btn-bg);
    color: var(--ir-btn-color);
    box-shadow: var(--ir-btn-shadow);
    transform: none;
}

.ir-btn:focus-visible {
    outline: 2px solid var(--ir-btn-focus-color);
    outline-offset: 2px;
    box-shadow: var(--ir-btn-focus-shadow);
}

.ir-btn:disabled,
.ir-btn[aria-disabled="true"] {
    border-color: var(--ir-btn-disabled-border-color);
    background: var(--ir-btn-disabled-bg);
    color: var(--ir-btn-disabled-color);
    box-shadow: var(--ir-btn-shadow);
    cursor: not-allowed;
    opacity: var(--ir-btn-disabled-opacity);
    transform: none;
}

.ir-btn[aria-disabled="true"] {
    pointer-events: none;
}

.ir-btn[hidden] {
    display: none;
}

.ir-btn > svg,
.ir-btn > .ir-btn__icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.ir-btn--primary {
    --ir-btn-bg: #ff6810;
    --ir-btn-color: #fff;
    --ir-btn-border-color: #ff6810;
    --ir-btn-hover-bg: #e95708;
    --ir-btn-hover-color: #fff;
    --ir-btn-hover-border-color: #e95708;
    --ir-btn-active-bg: #d94f05;
    --ir-btn-active-color: #fff;
    --ir-btn-active-border-color: #d94f05;
    --ir-btn-focus-color: #f3c9b0;
    --ir-btn-shadow: 0 5px 12px rgba(255, 104, 16, .18);
    --ir-btn-hover-shadow: 0 5px 12px rgba(255, 104, 16, .22);
    --ir-btn-active-shadow: 0 2px 6px rgba(255, 104, 16, .16);
}

.ir-btn--secondary {
    --ir-btn-bg: #fff;
    --ir-btn-color: #455267;
    --ir-btn-border-color: #e5e1dc;
    --ir-btn-hover-bg: #fff;
    --ir-btn-hover-color: #ff6810;
    --ir-btn-hover-border-color: #f3c9b0;
    --ir-btn-active-bg: #fff;
    --ir-btn-active-color: #455267;
    --ir-btn-active-border-color: #e5e1dc;
}

.ir-btn--ghost {
    --ir-btn-bg: transparent;
    --ir-btn-color: #151b2a;
    --ir-btn-border-color: transparent;
    --ir-btn-hover-bg: transparent;
    --ir-btn-hover-color: #ff6810;
    --ir-btn-hover-border-color: #f3c9b0;
    --ir-btn-active-bg: transparent;
    --ir-btn-active-color: #151b2a;
    --ir-btn-active-border-color: transparent;
}

.ir-btn--danger {
    --ir-btn-bg: #fff;
    --ir-btn-color: #c74250;
    --ir-btn-border-color: #f0c8cd;
    --ir-btn-hover-bg: #fff7f7;
    --ir-btn-hover-color: #c74250;
    --ir-btn-hover-border-color: #d94b58;
    --ir-btn-active-bg: #fff;
    --ir-btn-active-color: #c74250;
    --ir-btn-active-border-color: #f0c8cd;
    --ir-btn-focus-color: #efc5ca;
}

.ir-btn--sm {
    --ir-btn-min-height: 36px;
    --ir-btn-padding-x: 11px;
    --ir-btn-padding-y: 7px;
    --ir-btn-font-size: 12px;
    --ir-btn-radius: 8px;
}

.ir-btn--md {
    --ir-btn-min-height: 40px;
    --ir-btn-padding-x: 13px;
    --ir-btn-padding-y: 9px;
    --ir-btn-font-size: 13px;
    --ir-btn-radius: 9px;
}

.ir-btn--lg {
    --ir-btn-min-height: 48px;
    --ir-btn-padding-x: 18px;
    --ir-btn-padding-y: 11px;
    --ir-btn-font-size: 15px;
    --ir-btn-radius: 10px;
}

@media (hover: none) {
    .ir-btn:hover:not(:disabled):not([aria-disabled="true"]) {
        border-color: var(--ir-btn-border-color);
        background: var(--ir-btn-bg);
        color: var(--ir-btn-color);
        box-shadow: var(--ir-btn-shadow);
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ir-btn {
        transition-duration: 0s;
    }
}