@layer components {
    /**
     * BUTTONS
     */

    .btn,
    button.btn {
        transition: background-color 100ms ease-out;
        display: block;
        border-radius: 4px;
        float: left;
        background-repeat: no-repeat;
        position: relative;
        text-box: trim-both cap alphabetic;
    }
    .btn.full-width {
        text-align: center;
        display: block !important;
    }
    .btn.no-text-icon {
        text-indent: -9999px;
        overflow: hidden;
    }
    .btn.disabled,
    .btn[disabled],
    button.btn.disabled,
    button.btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }
    .btn.disabled:hover,
    .btn[disabled]:hover,
    button.btn.disabled:hover,
    button.btn[disabled]:hover {
        opacity: 0.5;
    }
    .text-center .btn,
    .text-center button.btn {
        float: none;
        display: inline-block;
    }
    .btn:focus,
    button:focus,
    .btn:hover,
    button:hover {
        text-decoration: none;
    }
    .btn.ico-right:after {
        background-position: 100% 50%;
    }

    /**
     * MODIFIERS: SIZE
     * Size variant padding classes (L, M, R, S, XS).
     */
    .btn.btn-r-icon-only {
        padding: 17px 19px;
    }
    /* L */
    .btn.btn-l {
        padding: 19px 24px;
    }
    .btn.btn-l.ico-left {
        padding: 19px 24px 19px 42px;
    }
    .btn.btn-l.ico-right {
        padding: 19px 42px 19px 24px;
    }
    .btn.btn-l.text-center {
        text-align: center;
    }
    /* M */
    .btn.btn-m {
        padding: 17px 24px;
    }
    .btn.btn-m.ico-left {
        padding: 17px 24px 17px 42px;
    }
    .btn.btn-m.ico-right {
        padding: 17px 42px 17px 24px;
    }
    /* R */
    .btn.btn-r {
        padding: 14px 24px;
    }
    .btn.btn-r.ico-left {
        padding: 16px 24px 16px 42px;
    }
    .btn.btn-r.ico-right {
        padding: 16px 42px 16px 24px;
    }
    .btn.btn-r.text-center,
    button.text-center {
        text-align: center;
    }
    /* S */
    .btn.btn-s {
        line-height: normal;
        padding: 10px 12px;
    }
    .btn.btn-s.outline {
        padding: 8px 10px;
    }
    .btn.btn-s.btn:before,
    .btn.btn-s.btn:after {
        height: 14px;
        margin-top: -7px;
    }
    .btn.btn-s.ico-left {
        padding: 10px 10px 10px 32px;
    }
    .btn.btn-s.ico-right {
        padding: 10px 32px 10px 10px;
    }
    .btn.btn-s.text-center {
        text-align: center;
    }
    .btn.btn-s.ico-left.full-width {
        text-align: left;
    }
    .btn.btn-s.ico-right.full-width {
        text-align: right;
    }
    /* XS */
    .btn.btn-xs {
        padding: 5px 13px;
        line-height: 1.3em;
    }
    .btn.btn-xs.ico-left {
        padding: 11px 11px 11px 42px;
    }
    .btn.btn-xs.ico-right {
        padding: 5px 42px 5px 5px;
    }
    .btn.btn-xs.text-center {
        align-items: center;
    }
    @media only screen and (max-width: 640px) {
        .btn.btn-l {
            padding: 11px 24px;
        }
        .btn.btn-m {
            padding: 10px 44px;
        }
        .btn.btn-r {
            padding: 3px 12px;
            line-height: 1.3em;
        }
        .btn.btn-r.thinner {
            padding: 8px 9px;
        }
        .btn.btn-s {
            padding: 2px 10px;
        }
        .btn.btn-xs {
            padding: 5px 13px;
        }
    }

    @media only screen and (min-width: 641px) and (max-width: 900px) {
        .btn.btn-l {
            padding: 11px 24px;
        }
        .btn.btn-m {
            padding: 10px 44px;
        }
        .btn.btn-r {
            padding: 7px 17px;
        }
        .btn.btn-s {
            padding: 6px 10px;
        }
        .btn.btn-xs {
            padding: 5px 13px;
        }
    }
    /**
     * MODIFIERS: STYLE
     * The standard solid, outline, and colour states.
     */
    .btn.solid:before,
    .btn.solid:after {
        filter: var(--brand-button-icon-filter, invert(100%));
    }
    .btn.outline,
    .btn.outline-accent {
        background-color: var(--color-ui-0);
        border: 1px solid var(--color-ui-200);
    }
    .btn.outline:hover:before,
    .btn.outline-accent:hover:before,
    .btn.outline:hover:after,
    .btn.outline-accent:hover:after {
        filter: invert(100%);
    }
    .theme .red-btn.btn.outline {
        border-color: var(--color-error-500);
        color: var(--color-error-500);
    }
    .theme .red-btn.btn.outline:before {
        filter: invert(13%) sepia(100%) saturate(7484%) hue-rotate(5deg) brightness(95%) contrast(116%);
    }
    .theme .red-btn.btn.outline:hover {
        background-color: var(--color-error-500);
        border-color: var(--color-error-500);
    }
    .btn.colour-outline,
    .btn.colour-outline-accent {
        background-color: var(--color-ui-0);
        border: 1px solid var(--color-ui-200);
        color: var(--color-ui-200);
    }
    .btn.colour-outline:hover:before,
    .btn.colour-outline-accent:hover:before {
        filter: invert(100%);
    }
    /* Outline Hover */
    .btn.outline-hover {
        color: var(--color-ui-500);
        border: 1px solid transparent;
    }
    .btn.outline-hover:before,
    .btn.outline-hover:after {
        filter: var(--filter-ui-500);
    }
    .btn.outline-hover:hover {
        color: var(--color-ui-800);
        background: var(--color-ui-300);
        border: 1px solid var(--color-ui-300);
        border-color: var(--color-ui-300);
    }
    .btn.outline-hover:hover:before,
    .btn.outline-hover:hover:after {
        filter: var(--filter-ui-800);
    }
    .btn.ico-left:before {
        content: " ";
        display: block;
        height: 16px;
        width: 16px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        left: 20px;
    }
    .btn.ico-right:after {
        content: " ";
        display: inline-block;
        height: 16px;
        width: 16px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        right: 20px;
    }
    .btn.btn-s.ico-left:before {
        height: 14px;
        width: 14px;
        margin-top: -7px;
        left: 14px;
    }
    .btn.btn-s.ico-right:after {
        height: 14px;
        width: 14px;
        margin-top: -7px;
        right: 14px;
    }
    .no-text-icon.btn.btn-s.ico-left:before {
        margin: 0;
    }
    .btn.btn-arrow-right:before,
    .btn.btn-arrow-right:after {
        background: url(/resources/images/buttons/next-arrow.svg) 100% 50% no-repeat;
        width: 8px;
        background-size: auto 12px;
    }
    .btn.btn-s.btn-arrow-right.ico-left {
        padding-left: 28px;
    }
    .btn.btn-s.btn-arrow-right.ico-right {
        padding-right: 28px;
    }
    .btn.btn-s.btn-arrow-right:before,
    .btn.btn-s.btn-arrow-right:after {
        background-size: auto 10px;
        width: 6px;
    }
    .btn.btn-s.semiBold-xs.btn-arrow-right:before,
    .btn.btn-s.semiBold-xs.btn-arrow-right:after {
        top: 50%;
    }
    /**
     * ICONS
     * Core generic interface buttons permitted across the framework.
     */
    .btn.btn-search.ico-left {
        padding-left: 45px;
    }
    .btn.btn-search.ico-right {
        padding-right: 45px;
    }
    .btn.btn-search:before,
    .btn.btn-search:after {
        background: url(/resources/images/buttons/search.svg) 0 50% no-repeat;
        width: 16px;
    }
    .btn.btn-s.btn-search:before,
    .btn.btn-s.btn-search:after {
        width: 12px;
        background-size: auto 12px;
    }
    .btn.btn-s.btn-search.ico-left {
        padding-left: 34px;
    }
    .btn.btn-s.btn-search.ico-right {
        padding-right: 34px;
    }
    .btn.btn-search.ico-left {
        padding-left: 49px;
    }
    .btn.btn-search.ico-right {
        padding-right: 49px;
    }
    .btn.btn-search.ico-left.full-width {
        padding-left: 37px;
    }
    .btn.btn-search.ico-right.full-width {
        padding-right: 37px;
    }
    .btn.right-aligned {
        float: right;
    }
    .btn.btn-loading:before,
    .btn.ico-right.btn-loading:after {
        content: "";
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-left-color: var(--color-ui-1000);
        border-top-color: var(--color-ui-1000);
        animation: btn-loading-spin 0.6s infinite linear;
        background: none;
        width: 22px;
        height: 22px;
        border-radius: 100%;
    }
    .btn.ico-right.btn-loading:before {
        display: none;
    }
    @keyframes btn-loading-spin {
        to {
            transform: rotate(359deg);
        }
    }
    .btn.btn-loading.btn-r.ico-left {
        padding-left: 48px;
    }
    .btn.btn-loading.btn-r.ico-right {
        padding-right: 48px;
    }
    .btn.btn-loading.btn-r:before,
    .btn.btn-loading.btn-r:after {
        width: 18px;
        height: 18px;
    }
    .btn.btn-loading.btn-s:before,
    .btn.btn-loading.btn-s:after {
        width: 12px;
        height: 12px;
    }
}