@import (reference) '../navbar/navbar';
@import '../../../less/mixins';

.navbar-button {
    display: inline-block;
    height: @navbar-height;

    > a {
        .uppercase;
        display: inline-block;
        height: @navbar-height;
        line-height: @navbar-height;
        font-size: inherit;
        font-family: inherit;
        color: @color-secondary;
        text-decoration: none;
        cursor: pointer;

        &:link,
        &:visited {
            color: @color-secondary;
            text-decoration: none;
        }

        &:hover,
        &:active {
            color: #fff;
            text-decoration: none;

            > span {
                border: 1px solid #fff;
            }
        }

        > span {
            .standard-transition(border-color, background-image);
            border: 1px solid @color-secondary;
            padding: 10px 15px 8px;
            border-radius: 16px;
        }
    }
}
