@import "variables";

.vn-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border: none;
    border-radius: 1px;
    font-family: vn-font-bold;
    text-transform: uppercase;
    font-size: .87rem;
    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;
        }
    }
    &.colored {
        color: white;
        background-color: $color-button;
        box-shadow: 0 2px 2px 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;

        &.cancel {
            &:hover,
            &:focus {
                background-color: transparent;
            }
        }
    }
    &.round {
        border-radius: 50%;
        height: 54px;
        width: 54px;

        & > button > span {
            display: none;
        }

        &.xs {
            font-size: .5rem;
        }
    
        &.sm {
            font-size: .7rem;
        }
    
        &.md {
            font-size: .875rem;
        }

        &.lg {
            font-size: 1.2rem;
        }
    }
    &.disabled {
        opacity: .7;
        cursor: initial;
    }
    &.cancel {
        color: $color-button;
        background-color: transparent;
        box-shadow: none;
        &:not(.disabled) {
            &:hover {
                color: lighten($color-button, 10%);
            }
        }
    }
    &.small {
        height: 24px;
        font-size: .75rem;

        & > button {
            padding: 0 6px;
        }
    }
}