.aw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    gap: 0.5rem;

    color: var(--btn-color);
    background-color: var(--btn-bg-color);
    border: var(--btn-border-width, 2px) solid
        var(--btn-border-color, var(--btn-bg-color));
    border-radius: var(--btn-radius, 0.625rem);

    min-height: var(--btn-size, 3rem);
    min-width: var(--btn-min-width, var(--btn-size, 3rem));
    padding: var(--btn-padding-y, 0.375rem) var(--btn-padding-x, 0.375rem);

    font-size: 1rem;
    line-height: 1.125rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;

    position: relative;

    transition: 100ms background-color, 100ms border-color;

    &__icon-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        font-size: 1rem;
        color: var(--icon-color, currentColor);

        &--highlighted {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: calc(
                var(--btn-radius, 0.625rem) - var(--btn-padding-y, 0.375rem)
            );

            background-color: color-mix(
                in srgb,
                var(--icon-color, var(--btn-color)) 15%,
                rgba(255, 255, 255, 0)
            );
            /* background-color: color-mix(in srgb, var(--btn-bg-color) 85%, var(--icon-color, var(--btn-color))); */
        }

        &--highlighted:where(&--left) {
            transform: translateX(
                calc(
                    var(--btn-padding-y, 0.375rem) -
                        var(--btn-padding-x, 0.5rem)
                )
            );
        }

        &--highlighted:where(&--right) {
            transform: translateX(
                calc(
                    var(--btn-padding-x, 0.5rem) -
                        var(--btn-padding-y, 0.375rem)
                )
            );
        }

        &--placeholder {
            width: 2.5rem;
            flex-shrink: 999999;
        }
    }

    &__loader {
        height: 0.5rem;
        width: auto;
        max-width: 80%;

        fill: var(--icon-color, var(--btn-color));

        position: absolute;
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
    }

    &__lock {
        display: flex;
        align-items: center;
        justify-content: center;

        position: absolute;
        inset: 0;
    }

    &__lock span {
        background-color: var(--c-surface);
        color: var(--c-on-surface);

        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        padding: 0.32em;
        font-size: 1.2em;
    }

    &:disabled {
        cursor: not-allowed;
        user-select: none !important;
        opacity: 0.5;
    }

    &:disabled .aw-icon--animated {
        pointer-events: none;
    }

    &:where(:not(:disabled)):active {
        transform: translateY(1px);
    }

    &--with-text:where(:not(&--auto-width)) {
        --btn-min-width: 5rem;
        --btn-padding-x: 1rem;
    }

    &--with-text:where(&--size-md:not(&--auto-width)) {
        --btn-min-width: 6.25rem;
    }

    &--with-text:where(&--size-lg:not(&--auto-width)) {
        --btn-min-width: 7rem;
    }

    &--size-xxs {
        --btn-size: 1rem;
        --btn-padding-x: 0;
        --btn-padding-y: 0;

        line-height: 1;
    }

    &--size-xs {
        --btn-size: 2rem;
        --btn-padding-x: 0.375rem;

        line-height: 1;
    }

    &--size-sm {
        --btn-size: 2.5rem;
    }

    &--size-md {
        --btn-size: 3rem;
    }

    &--size-lg {
        --btn-size: 3.5rem;
    }

    &--with-text {
        --btn-padding-x: 1rem;
    }

    &--with-text:where(&--size-xs) {
        --btn-padding-x: 0.75rem;
    }

    &--with-text:where(&--size-lg) {
        --btn-padding-x: 1.5rem;
    }

    &--color-accent:where(&--theme-solid) {
        --btn-bg-color: var(--c-accent);
        --btn-color: var(--c-on-accent);
        --btn-bg-hover: var(--c-accent-hover);
    }

    &--color-error:where(&--theme-solid) {
        --btn-bg-color: var(--c-error);
        --btn-color: var(--c-on-error);
        --btn-bg-hover: var(--c-error-hover);
    }

    &--color-dark:where(&--theme-solid) {
        --btn-bg-color: var(--c-mono-100);
        --btn-color: var(--c-on-mono-100);
        --btn-bg-hover: var(--c-mono-0);
    }

    &--color-mono-light:where(&--theme-solid) {
        --btn-bg-color: var(--c-mono-900);
        --btn-color: var(--c-on-mono-900);
        --btn-bg-hover: var(--c-mono-800);
        --icon-color: var(--c-mono-400);
    }

    &--color-mono:where(&--theme-solid) {
        --btn-bg-color: var(--c-mono-800);
        --btn-color: var(--c-on-mono-800);
        --btn-bg-hover: var(--c-mono-700);
        --icon-color: var(--c-mono-400);
    }

    &--color-mono-dark:where(&--theme-solid) {
        --btn-bg-color: var(--c-mono-700);
        --btn-color: var(--c-on-mono-700);
        --btn-bg-hover: var(--c-mono-600);
        --icon-color: var(--c-mono-400);
    }

    &--color-mono-darker:where(&--theme-solid) {
        --btn-bg-color: var(--c-mono-600);
        --btn-color: var(--c-on-mono-600);
        --btn-bg-hover: var(--c-mono-500);
        --icon-color: var(--c-mono-400);
    }

    &--theme-outline {
        --btn-bg-color: transparent;
        --btn-color: var(--c-mono-100);
        --btn-border-color: var(--c-mono-800);
        --icon-color: var(--c-mono-400);
        --btn-border-hover-fallback: var(--c-mono-700);
    }

    &--theme-outline:where(:not(:disabled)):hover {
        border-color: var(--btn-border-hover, var(--btn-border-hover-fallback));
    }

    &--theme-outline:where(:not(&--loading, &--locked)):disabled {
        --btn-color: var(--c-mono-400);
    }

    &--theme-solid {
        --btn-border-width: 0;
        --btn-bg-hover-fallback: color-mix(
            in srgb,
            var(--btn-bg-color) 90%,
            rgb(var(--c-overlay-rgb))
        );
    }

    &--theme-solid:where(:not(:disabled)):hover {
        background-color: var(--btn-bg-hover, var(--btn-bg-hover-fallback));
        border-color: var(--btn-bg-hover, var(--btn-bg-hover-fallback));
    }

    &--theme-solid:where(:is(&--color-mono, &--color-mono-light, &--color-mono-dark):not(&--with-text):not(:disabled)):hover {
        --icon-color: var(--c-mono-100);
    }

    /* &--theme-solid:where(:not(&--loading, &--locked)):disabled {
        --btn-bg-color: var(--btn-bg-disabled, var(--c-mono-800));
        --btn-color: var(--c-mono-400);
    } */

    &--theme-icon {
        opacity: 0.4;

        &:where(:not(:disabled)):hover {
            opacity: 0.9;
        }
    }

    &--theme-icon,
    &:where(:not(&--with-text)) {
        --btn-min-width: var(--btn-size);
        flex-shrink: 0;

        /* &:active {
            transform: none;
        } */
    }

    &--loading {
        color: transparent;

        cursor: wait !important;
        user-select: none !important;
    }

    &--loading &__icon-wrapper {
        color: transparent;
        background-color: transparent;
    }

    &--icon-highlighted {
        /* gap: 1rem; */
        justify-content: space-between;
    }
}

@screen lg {
    .aw-button {
        &--size-md {
            --btn-size: 2.5rem;
        }

        &--size-xs,
        &--size-sm,
        &--size-md {
            font-size: 0.875rem;
        }
    }
}

.aw-buttons-group {
    display: inline-flex;
    gap: 1px;

    :not(:first-child) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    :not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    & > :active {
        transform: none;
    }

    &--collapsed {
        gap: 0;

        & > * + * {
            margin-left: -2px;
        }

        & > :hover {
            z-index: 1;
        }
    }
}