nebulosa-css/src/buttons.scss

// FIXME: All secondary buttons should maybe use a secondary colour!
// FIXME: Actually, some should maybe just be black...

@use "palette";

.btn {
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-align: center;
    margin: .5rem 1rem .5rem 0;
    padding: .5rem 1rem;
    border: 2px solid palette.$primary;

    &.raised {
        transform: translateY(-.3rem);
        box-shadow: 0 .3rem 0 0 palette.$primary600;
        transition: .3s transform, .3s box-shadow;


        &:hover {
            transform: translateY(0);
            box-shadow: 0 0 0 0 palette.$primary600;
        }

        &.primary {
            @if lightness(palette.$primary) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: palette.$primary;
        }

        &.secondary {
            @if lightness(palette.$accent) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: palette.$accent;
            border-color: palette.$accent;
            box-shadow: 0 .3rem 0 0 palette.$accent600;

            &:hover {
                box-shadow: 0 0 0 0 palette.$accent600;
            }
        }

        &[disabled] {
            color: palette.$grey500;
            background-color: palette.$grey200;
            border-color: palette.$grey200;
            box-shadow: 0 .3rem 0 0 palette.$grey300;

            &:hover {
                transform: translateY(-.3rem);
            }
        }
    }

    &.filled {
        transition: .3s color, .3s background-color;

        &.primary {
            @if lightness(palette.$primary) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: palette.$primary;
        }

        &.secondary {
            @if lightness(palette.$accent) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: palette.$accent;
            border-color: palette.$accent;
        }

        &:hover {
            color: palette.$grey900;
            background-color: transparent;
        }

        &[disabled] {
            color: palette.$grey500;
            background-color: palette.$grey200;
            border-color: palette.$grey200;
        }
    }

    &.outline {
        transition: .3s color, .3s background-color;

        &.primary {
            @if lightness(palette.$primary) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: transparent;

            &:hover {
                background-color: palette.$primary;
            }
        }

        &.secondary {
            @if lightness(palette.$accent) < 50 {
                color: palette.$grey50
            } @else {
                color: palette.$grey900
            }
            background-color: transparent;
            border-color: palette.$accent;

            &:hover {
                background-color: palette.$accent;
            }
        }

        &[disabled] {
            color: palette.$grey500;
            border-color: palette.$grey200;
        }
    }

    &.textonly {
        font-weight: bold;
        font-family: 'Manrope';
        padding: .5rem .3rem;
        background-color: transparent;
        border-color: transparent;
        text-transform: uppercase;

        &.primary {
            color: palette.$primary;

            &:hover {
                text-decoration: wavy underline;
            }
        }

        &.secondary {
            color: palette.$text;

            &:hover {
                text-decoration: wavy underline;
            }
        }

        &[disabled] {
            color: palette.$grey300;
        }
    }

    &[disabled] {
        cursor: not-allowed;
    }
}