@import "../_base.scss"

%button {
    height: 100%;
    aspect-ratio: 3.5;

    border: $border-normal;
    border-radius: 5%;

    color: get-color(greyscale, 0);

    font-family: "Geist";
    font-weight: bold;

    // To center the inner svg
    // TODO: Find a more efficient way to center
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
        height: 85%;
        width: 85%;

        text {
            font-size: 50;
            text-anchor: middle;
            dominant-baseline: central;
            fill: get-color(greyscale, 0);
        }
    }
}

@mixin button($color-name, $color-level) {
    @extend %button;

    background-color: get_color($color-name, $color-level);

    &:hover {
        background-color: get_color($color-name, calc($color-level - 10));
    }

    &:active {
        background-color: get_color($color-name, calc($color-level - 20));
    }
}

.register-button {
    @include button(ternary, 90);
}

.login-button {
    @include button(secondary, 90);
}

.join-button {
    @include button(secondary, 90);
}

.reject-button {
    @include button(critical, 90);
}

.success-button {
    @include button(success, 100);
}

.warning-button {
    @include button(warning, 100);
}

.error-button {
    @include button(critical, 100);
}