@use '../../scss/config.scss' as *;

.button {
    @include layout(inline-flex, center, xs);
    @include typography(default, primary-50, none, normal);
    @include spacing(py-sm, px-md);
    @include border-radius(xs);
    @include border(0);
    @include transition();
    @include background(primary);

    cursor: pointer;

    &[disabled] {
        @include visibility(.5);

        pointer-events: none;
        cursor: not-allowed;
    }

    &:hover {
        @include background(primary-20);
    }

    &.secondary {
        @include typography(primary);
        @include background(primary-50);

        &:hover {
            @include background(primary-40);
        }
    }

    &.outline {
        @include typography(primary);
        @include background(transparent);
        box-shadow: inset 0px 0px 0px 1px var(--w-color-primary-40);

        &:hover {
            @include background(primary-60);
            box-shadow: inset 0px 0px 0px 1px var(--w-color-primary);
        }
    }

    &.flat {
        @include typography(primary);
        @include background(transparent);

        &:hover {
            @include background(primary-40);
        }
    }

    &.info {
        @include typography(info-fg);
        @include background(info);

        &:hover {
            @include background(info-accent);
        }
    }

    &.success {
        @include typography(success-fg);
        @include background(success);

        &:hover {
            @include background(success-accent);
        }
    }

    &.warning {
        @include typography(warning-fg);
        @include background(warning);

        &:hover {
            @include background(warning-accent);
        }
    }

    &.alert {
        @include typography(alert-fg);
        @include background(alert);

        &:hover {
            @include background(alert-accent);
        }
    }

    svg {
        pointer-events: none;
    }
}