@import "../../../css/static/mixin.scss";
@import "../../../css/static/properties.scss";

html:root {
    --button-background: rgba(0, 0, 0, 0.5);
    --button-background-solid: rgba(0, 0, 0, 1); /* TODO! */

    --button-hover-background: rgba(0, 0, 0, 0.7);
    --button-hover-background-solid: #121212;

    --button-disabled-background: rgba(0, 0, 0, 0.27);
    --button-disabled-background-solid: rgba(0, 0, 0, 1); /* TODO! */

    --button-color: #7c7c7c;

    --button-green: #389738;
    --button-blue: #386896;
    --button-red: #973838;
    --button-purple: #5f3586;
    --button-brown: #965238;
    --button-yellow: #96903a;
}

.button {
    cursor: pointer;

    background-color: var(--button-background);

    border-width: 0;
    border-radius: $border_radius_middle;
    border-style: solid;

    color: var(--button-color);

    height: 2.2em;
    padding: .25em 1em;

    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);

    @include text-dotdotdot();

    &:hover {
        background-color: #121212;
    }

    &:disabled {
        box-shadow: none;
        background-color: var(--button-disabled-background);
    }

    &.nonTransparent {
        background-color: var(--button-background-solid);

        &:hover {
            background-color: var(--button-hover-background-solid);
        }

        &:disabled {
            background-color: var(--button-disabled-background-solid);
        }
    }

    &.color-green {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-green);
    }

    &.color-blue, &.color-default {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-blue);
    }

    &.color-red {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-red);
    }

    &.color-purple {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-purple);
    }

    &.color-brown {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-brown);
    }

    &.color-yellow {
        border-bottom-width: 2px;
        border-bottom-color: var(--button-yellow);
    }

    &.color-none {
        --keep-alive: true;
    }

    &.type-normal { }

    &.type-small {
        font-size: .9em;
    }

    &.type-extra-small {
        font-size: .6em;
    }

    @include transition(background-color $button_hover_animation_time ease-in-out);
}