accounts-frontend/src/components/ui/buttons.scss

@import './colors.scss';
@import './fonts.scss';

@mixin button-theme($themeName, $backgroundColor, $textColor : $defaultButtonTextColor) {
    .#{$themeName} {
        composes: button;

        @if ($textColor != $defaultButtonTextColor) {
            color: $textColor;
        }

        background-color: $backgroundColor;

        &:hover {
            background-color: lighter($backgroundColor);
        }

        &:active {
            background-color: darker($backgroundColor);
        }
    }
}

.button {
    display: inline-block;
    box-sizing: border-box;
    height: 50px;
    padding: 0 15px;
    border: none;

    font-family: $font-family-title;
    color: $defaultButtonTextColor;
    font-size: 18px;
    line-height: 50px;
    text-decoration: none;
    cursor: pointer;

    transition: background-color 0.25s;

    &:focus {
        outline: none;
    }
}

.smallButton {
    composes: button;

    height: 30px;
    padding: 0 7px;
    font-size: 14px;
    line-height: 30px;
}

.light {
    composes: button;

    background-color: #fff;
    color: #444;

    &:hover {
        color: #262626;
        background-color: $lightButtonLight;
    }

    &:active {
        background-color: $lightButtonDark;
    }
}

@include button-theme('black', $black);
@include button-theme('blue', $blue);
@include button-theme('green', $green);
@include button-theme('orange', $orange);
@include button-theme('darkBlue', $dark_blue);
@include button-theme('lightViolet', $light_violet);
@include button-theme('violet', $violet);

.block {
    display: block;
    width: 100%;
}