@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;
    }
}

.black {
    composes: button;

    background-color: $black;

    &:hover {
        background-color: $black-button-light;
    }

    &:active {
        background-color: $black-button-dark;
    }
}

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