@layer components {
    .btn {
        --transition-dur: 180ms;
        --transition-func: ease-in-out;
        --border-color-alpha: .15;
        --lh: 1.5em;
        --lh: 1lh;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: .625rem;
        border-radius: 200px;
        padding: 1.125rem 1.5rem;
        background-color: rgb(from var(--c-blue) r g b / .05);
        border: 1px solid rgb(from var(--c-blue) r g b / var(--border-color-alpha));
        text-decoration: none;
        line-height: 1.5;
        cursor: pointer;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        -webkit-transition: border-color var(--transition-dur) var(--transition-func);
        transition: border-color var(--transition-dur) var(--transition-func);
    }

    .btn svg {
        -ms-flex-negative: 0;
            flex-shrink: 0;
        color: var(--c-orange);
        width: .6875rem;
        height: .6875rem;
        -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
    }

    .btn.outline {
        background: none;
    }

    .btn.link {
        --transition-dur: 100ms;
        border: 0;
        padding: 0;
        background: none;
        border-radius: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }

    .btn.circle {
        --size: 3.25rem;
        width: var(--size);
        height: var(--size);
        padding: 0;
        border-radius: 50%;
    }

    .btn.circle svg {
        color: currentColor;
    }
    
    .btn > .text-wrap {
        overflow-y: clip;
        padding-block: .2em;
        margin-block: -.2em;
    }

    .btn > .text-wrap span {
        display: block;
        text-shadow: 0 var(--lh) currentColor;
        -webkit-transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: -webkit-transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func);
        transition: transform var(--transition-dur) var(--transition-func), -webkit-transform var(--transition-dur) var(--transition-func);
    }

    .btn:not(.link):is(:hover, :focus-within) {
        --border-color-alpha: .5;
    }

    .btn.link > span {
        -webkit-transition: opacity var(--transition-dur) var(--transition-func);
        transition: opacity var(--transition-dur) var(--transition-func);
    }

    .btn.link:is(:hover, :focus-within) > span {
        opacity: .65;
    }

    .btn:is(:hover, :focus-within) > .text-wrap span {
        -webkit-transform: translateY(calc(-1 * var(--lh)));
            -ms-transform: translateY(calc(-1 * var(--lh)));
                transform: translateY(calc(-1 * var(--lh)));
    }
    
    .btn:is(:hover, :focus-within) svg.bs-icon--arrow-left {
        -webkit-transform: translateX(-.125rem);
            -ms-transform: translateX(-.125rem);
                transform: translateX(-.125rem);
    }
    
    .btn:is(:hover, :focus-within) svg.bs-icon--arrow-right {
        -webkit-transform: translateX(.125rem);
            -ms-transform: translateX(.125rem);
                transform: translateX(.125rem);
    }
    
    .btn:is(:hover, :focus-within) svg.bs-icon--arrow-down {
        -webkit-transform: translateY(.125rem);
            -ms-transform: translateY(.125rem);
                transform: translateY(.125rem);
    }

    :where(.is-dark) .btn {
        --border-color-alpha: .2;
        background-color: rgb(from var(--c-white) r g b / .05);
        border-color: rgb(from var(--c-white) r g b / var(--border-color-alpha));
    }

    @media screen and (width <= 620px) {
        .btn {
            padding: 1rem 1.375rem;
        }

        .btn.circle {
            --size: 2.5rem;
        }
    }
}