// clean icon buttons
.wvButton {
    // Remove <a> default styles. Take care - this class may either be used
    // with <a> or <button>.
    &:hover {
        text-decoration: none;
        color: white;
    }

    // Remove <button> default styles.
    outline: none;
    background-color: transparent;
    border: none;
    border-radius: 0;

    // Set relative to position button absolutely
    position: relative;

    // Style button
    display: inline-block;
    cursor: pointer;
    font-variant: small-caps;
    text-transform: lowercase;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 400;
    color: hsl(0, 0%, 85%);
    transition: 0.3s text-decoration ease, 0.3s border ease, 0.3s opacity ease;

    // Position button
    margin: 0;
    min-width: 3rem;
    padding: 0 10px;
    line-height: 3.6rem;
    &.wvLargeButton{
        font-size: 2rem;
        line-height: 6.2rem;
        padding: 0 20px;
    }
}

.wvButton--rotate {
    @extend .wvButton;
    // Rotate only the icon
    &:before, &:after{
        transform: rotate(90deg);
        display: inline-block;
    }

}

.wvButton--vflip {
    @extend .wvButton;
    // flip only the icon
    &:before, &:after{
        transform: scaleX(-1);
        display: inline-block;
    }

}

// button w/ blue underline
.wvButton--underline, .fa.wvButton--underline {
    @extend .wvButton;

    position: relative;

    background-color:inherit;
    text-decoration: none;
    text-align:left;
    font-size: 1.2rem;
    &.wvLargeButton{
        font-size: 2rem;
        width: 6.4rem;
    }
    * {
        pointer-events: none;
    }
    &:hover, &:active, &:focus{
        outline:0;
    }

    width: 3.2rem;
    vertical-align: middle;
    color:white;
    opacity: 0.75;
    border:none;
    border-bottom: 2px solid rgba(255,255,255,0.1);
    &:hover, &:focus{
        border-color: rgba(255,255,255,1);
        opacity:1;
        .wvButton__bottomTriangle{
            border-left-color: rgba(255,255,255,1);
            &.toggled{
                // border-color: rgba(255, 255, 255, 1);
            }
        }
    }
    &.active{
        opacity: 1;
        border-color: $primary;
    }

    // Make sure the 2px border is not hidden by viewports and other parts of
    // the layout (.glyphicon class sets top to 1px)
    top: 0px;

    // Compensate glyphicon whitespace
    &::before {
        position: relative;
        top: -1px;
    }

    // Adapt font-awesome icon to glyphicon styles
    &.fa {
        top: 0px;
        font-weight: 800;
    }
}

.wvButton__bottomTriangle{
    transition: 0.3s border ease, 0.3s opacity ease;

    display:block;
    position: absolute;
    bottom:0;
    left:0;

    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 0 0 10px;
    border-color: transparent transparent transparent rgba(255,255,255,0.1);
    &.active{
        border-color: transparent transparent transparent $primary !important;
        &.toggled{
            border-left-color: $primary !important;
        }
    }
    &.toggled{
        // border-width: 15px 0 0 15px;
    }
}

// button w/ border
.wvButton--border {
    @extend .wvButton;

    // Prevent multi line buttons.
    max-height: calc(2.8rem - 3px);
    max-width: 100%;
    overflow: hidden;

    // Set margin
    margin: 0.6rem;
    margin-left: 0rem;
    margin-right: 0rem;
    & + & {
        margin-left: 0.7rem;
    }

    // Set button size
    line-height: 2rem;

    // Align text
    padding-top: 0.1rem;
    padding-bottom: 0.5rem;

    // Style button
    font-size: 1.4rem;
    border: 1px solid hsl(0, 0%, 27%);

    // Set best looking font with small-caps.
    font-family: Arial;

    // Change background on hover
    background-color: hsl(0, 0%, 0%);
    &:hover {
        background-color: hsl(0, 0%, 10%);
    }

    & > .glyphicon { // used with the same element as glyphicons
        // Position button
        position: relative;
        display: inline-block;
        top: 3px;
        margin-right: 4px;
    }
}

// button w/ border + white modifier to use when the background is white.
.wvButton--borderAndWhite {
    @extend .wvButton--border;

    // Text color
    color: hsl(0, 0%, 10%);
    border: 1px solid hsl(0, 0%, 73%);

    // Change background on hover
    background-color: hsl(0, 0%, 100%);
    &:hover {
        color: hsl(0, 0%, 10%);
        background-color: hsl(0, 0%, 90%);
    }
}