@mixin sliding-door($type: level2) {
    background: url(/common/img/new-visd-buttons/imvu-button-#{$type}-right.png) 100% 0 no-repeat;
    > span { background: url(/common/img/new-visd-buttons/imvu-button-#{$type}-left-mid.png) 0 0 no-repeat; }
}

@mixin sliding-door-states($type: level2) {
    &:hover { @include sliding-door(#{$type}-hover); }
    &:active { @include sliding-door(#{$type}-active); }
}

@mixin button($type: level2) {
    @include sliding-door($type);
    @include sliding-door-states($type);
}

.imvu-button {
    -webkit-user-select: none;
    -webkit-appearance: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    background: none;
    border: 0;
    color: #000;
    cursor: pointer;
    display: inline-block;
    font-family: Cabin, sans-serif;
    font-size: 0;
    font-weight: 500;
    padding: 0px;
    text-align: center;
    vertical-align: middle;
    margin: 0px;
    outline: 1px;

    * {
        font-family: Cabin, sans-serif;
        font-size: 0;
        line-height: 0;
        text-indent: 0;
    }

    /* Don't display the dotted outline on <button>s when focused. */
    &::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    &[disabled] {
        cursor: default;
        opacity: 0.5;
        color: rgba(0, 0, 0, 0.25);

        &.white-text { color: rgba(255, 255, 255, 0.25); }
        &.yellow-text { color: rgba(255, 204, 0, 0.25); }
        &.arrow.white-text,
        &.arrow.yellow-text,
        &.light-gray { text-shadow: none; }
    }

    &.dark-gray {color: #fff; }

    &.level2 {
        height: 30px;
        line-height: 0;
        padding: 0px 6px 0px 0px;
        vertical-align: middle;
        margin: 0px;
        border: 0px;
        white-space: nowrap;
        width: auto;
        overflow: visible;
        text-decoration: none;
        > span {
            display: block;
            font-size: 12px;
            padding: 0 10px 0 16px;
            height: 30px;
            line-height: 29px;
            white-space: nowrap;
        }

        @include button(level2);
        &.dark-gray { @include button(level2-dark-gray); }
        &.light-gray { @include button(level2-light-gray); }
    }
}