@import "variables";

.vn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: none;
    border-radius: .1em;
    font-family: vn-font-bold;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;

    & > button {
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
        background-color: transparent;
        border: none;
        height: inherit;
        color: inherit;
        font: inherit;
        display: block;
        text-transform: inherit;
        cursor: inherit;
        outline: none;
        display: flex;
        align-items: center;
        justify-content: center;

        & > vn-icon {
            vertical-align: middle;
            color: inherit;
            font-size: 1.7em;
        }
    }
    &.colored {
        color: white;
        background-color: $color-button;
        box-shadow: 0 .15em .15em 0 rgba(0, 0, 0, .3);
        transition: background 200ms ease-in-out;

        &:not(.disabled) {
            &:hover,
            &:focus {
                background-color: lighten($color-button, 10%);
            }
        }
    }
    &.message {
        color: white;
        background-color: $color-bg-dark;

        &:not(.disabled) {
            &:hover,
            &:focus {
                background-color: lighten($color-bg-dark, 10%);
            }
        }
    }
    &.flat {
        color: $color-button;
        background-color: transparent;
        box-shadow: none;
        transition: background 200ms ease-in-out;

        &:not(.disabled) {
            &:hover,
            &:focus {
                background-color: $color-hover-cd;
            }
        }
    }
    &:hover,
    &:focus {
        outline: none;
    }
    &.round {
        border-radius: 50%;
        height: 3.8em;
        width: 3.8em;

        & > button > span {
            display: none;
        }

        &.xs {
            font-size: 0.5em;
        }
    
        &.sm {
            font-size: 0.7em;
        }
    
        &.md {
            font-size: 0.9em;
        }

        &.lg {
            font-size: 1.2em;
        }
    }
    &.disabled {
        opacity: .7;
        cursor: initial;
    }
}