@layer components {
    .icon {
        fill: currentColor
    }

    .icon[src] {
        filter: var(--icon-filter, none)
    }

    .icon--tech {
        filter: none !important
    }

    .icon--tech[src] {
        filter: none
    }
}

@layer components {
    .text {
        line-height: var(--lineHeightBody);
        color: var(--textBody)
    }

    .text[data-size=s] {
        font-size: var(--fontSizeBodyS)
    }

    .text[data-size=m] {
        font-size: var(--fontSizeBodyM)
    }

    .text[data-size=l] {
        font-size: var(--fontSizeBodyL)
    }

    .text[data-size=xl] {
        font-size: var(--fontSizeBodyXL)
    }

    .text[data-align=auto] {
        text-align: inherit
    }

    .text[data-align=start] {
        text-align: start
    }

    .text[data-align=center] {
        text-align: center
    }

    .text[data-weight=auto] {
        font-weight: inherit
    }

    .text[data-weight=regular] {
        font-weight: var(--fontWeightRegular)
    }

    .text[data-weight=medium] {
        font-weight: var(--fontWeightMedium)
    }

    .text[data-weight=bold] {
        font-weight: var(--fontWeightBold)
    }

    .text[data-secondary=true] {
        color: var(--textLight)
    }
}

@layer components {
    .loader {
        display: grid;
        grid-template-columns: 100%;
        width: var(--width);
        height: var(--height);
        background: color-mix(in lab, currentColor 20%, transparent)
    }

    .loader[data-center=true] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .loader__text {
        color: inherit
    }

    @keyframes loader-span {
        0% {
            transform: scaleX(0);
            transform-origin: left
        }

        50% {
            transform: scaleX(1);
            transform-origin: left
        }

        51% {
            transform: scaleX(1);
            transform-origin: right
        }

        to {
            transform: scaleX(0);
            transform-origin: right
        }
    }

    .loader__dot {
        grid-area: 1 / 1;
        background: currentColor;
        animation: loader-span .7s var(--bezierFastoutSlowin) infinite;
        transform: scaleX(0);
        transform-origin: left
    }
}

@layer components {
    .button {
        --buttonSize: 3.5rem;
        --buttonFontSize: 1.125rem;
        --buttonFocusWidth: 4px;
        --buttonPadding: 0 var(--spaceL);
        --buttonTextColor: var(--background);
        --buttonTextOpacity: 1;
        --buttonLoaderDelay: 0s;
        height: var(--buttonSize);
        padding: var(--buttonPadding);
        cursor: pointer;
        transition-property: opacity, color, background;
        transition-duration: var(--durationS);
        transition-timing-function: var(--bezierFastoutSlowin);
        display: inline-flex;
        align-items: center;
        color: var(--buttonTextColor);
        position: relative;
        isolation: isolate
    }

    .button:active {
        transition-duration: calc(var(--durationXS) / 2)
    }

    .button:after {
        content: "";
        transition-property: opacity, color, background;
        transition-duration: var(--durationM);
        transition-timing-function: var(--bezierFastoutSlowin);
        background: var(--primary);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%)
    }

    @media (prefers-reduced-motion: no-preference) {
        .button {
            transition-property: transform, opacity, color, background
        }

        .button:hover {
            transform: scale(1.05)
        }

        .button:active {
            transform: scale(1)
        }
    }

    .button[data-secondary=true] {
        --buttonSpace: 10px;
        --buttonTextColor: var(--primary);
        background: none;
        padding-left: var(--buttonSpace);
        padding-right: var(--buttonSpace);
        position: relative;
        left: calc(var(--buttonSpace) * -1);
        height: 2rem
    }

    .button[data-secondary=true]:after {
        content: "";
        height: 2rem;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: color-mix(in lab, var(--primary) 20%, transparent);
        transform: scale3d(0, 1, 1);
        transform-origin: right;
        clip-path: none
    }

    .button[data-secondary=true]:hover {
        transform: none;
        background: transparent
    }

    .button[data-secondary=true]:hover:after {
        transform: scaleZ(1);
        transform-origin: left
    }

    .button[data-secondary=true][data-icon=chevron-right] {
        padding-left: calc(var(--buttonSpace) / 2)
    }

    @media (prefers-reduced-motion: no-preference) {
        .button[data-secondary=true]:after {
            transition: transform var(--durationM) var(--bezierFastoutSlowin)
        }
    }

    .button[data-loading=true] {
        --buttonTextOpacity: 0
    }

    .button[data-icon-only=true] {
        --buttonPadding: 0;
        --buttonTextColor: var(--textBody);
        width: var(--buttonSize);
        align-items: center;
        justify-content: center;
        padding: 0
    }

    .button[data-icon-only=true]:hover {
        transform: none
    }

    .button[data-icon-only=true]:after {
        background: color-mix(in lab, var(--text) 0%, transparent)
    }

    .button[data-icon-only=true]:hover:after {
        background: color-mix(in lab, var(--text) 10%, transparent)
    }

    .button[disabled] {
        pointer-events: none;
        opacity: .4
    }

    .button__text {
        font-size: var(--buttonFontSize);
        font-weight: var(--fontWeightMedium);
        opacity: var(--buttonTextOpacity);
        position: relative;
        line-height: 1;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity var(--durationM) var(--bezierFastoutSlowin)
    }

    .button__loader {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        color: var(--background);
        opacity: 0;
        transition: opacity var(--durationM) ease var(--buttonLoaderDelay)
    }

    .button__loader[data-visible=true] {
        opacity: 1
    }

    .button__icon {
        transition-property: opacity, fill;
        transition-duration: var(--durationS);
        transition-timing-function: var(--bezierFastoutSlowin)
    }

    @media (prefers-reduced-motion: no-preference) {
        .button__icon {
            transition-property: transform, opacity, fill
        }
    }

    .button__icon[data-start=true] {
        margin-right: var(--spaceS)
    }

    .button__icon[data-end=true] {
        margin-left: var(--spaceS)
    }

    @media (prefers-reduced-motion: no-preference) {
        .button:hover .button__icon[data-shift=true] {
            transform: translate3d(var(--spaceXS), 0, 0)
        }
    }

    .button[data-loading=true] .button__icon {
        opacity: 0
    }
}