@use '~flux/components/css/mixin';

@layer flux-base {
    .button {
        // A button owns its text: its height is fixed, so the label must not
        // follow the font-size of whatever it happens to sit in.
        @include mixin.text(default);

        display: inline-flex;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
        gap: 12px;
        justify-content: center;
        background: unset;
        border: 1px solid;
        border-radius: var(--radius);
        box-shadow: var(--shadow-px);
        cursor: pointer;
        text-decoration: none;
        transition: var(--transition-default);
        transition-property: background, border, box-shadow, color, scale, mixin.focus-ring-transition-properties();
        user-select: none;

        @include mixin.focus-ring(2px);

        &:active {
            box-shadow: none;
        }

        &:focus-visible {
            z-index: 1;
        }

        &:disabled,
        &[aria-disabled=true] {
            box-shadow: none;
            opacity: .5;
            pointer-events: none;
        }

        &.isSmall {
            height: 36px;
            padding: 0 9px;
        }

        &.isMedium {
            height: 42px;
            padding: 0 12px;
        }

        &.isLarge {
            height: 48px;
            padding: 0 15px;
        }

        &.isXl {
            height: 54px;
            padding: 0 18px;
        }

        &.isFilled {
            align-self: stretch;
        }

        :local(.spinner) {
            flex-shrink: 0;

            &:only-child {
                margin-left: -2px;
                margin-right: -2px;
            }
        }

        &:has(.buttonIcon:only-child) {
            padding-left: 0;
            padding-right: 0;

            &.isSmall {
                width: 36px;
            }

            &.isMedium {
                width: 42px;
            }

            &.isLarge {
                width: 48px;
            }

            &.isXl {
                width: 54px;
            }
        }
    }

    .buttonIcon {
        margin: 1px;
        flex-shrink: 0;
        font-size: 18px;

        &:only-child {
            margin-left: -1px;
            margin-right: -1px;
        }
    }

    .buttonLabel {
        display: inline-block;
        font-weight: 500;
        text-align: center;

        &:only-child {
            margin-left: 6px;
            margin-right: 6px;
            min-width: 42px;
        }
    }

    .button .badge {
        &:first-child {
            margin-left: -6px;
        }

        &:last-child {
            margin-right: -6px;
        }
    }
}