// __Font Sizes__ //
%xsmall {font-size: .75rem;}
%small {font-size: .9rem;}
%medium {font-size: 1rem;}
%large {font-size: 1.2rem;}
%larger {font-size: 1.6rem;}
%xlarge {font-size: 2rem;}
%xxlarge {font-size: 3rem;}

// __Font Types__ //
%title {font-family: 'OpenSans-CondLight', Arial, Helvetica, sans-serif; }
%light {font-family: 'OpenSans-Light', Arial, Helvetica, sans-serif; }
%text {font-family: 'OpenSans-Regular', Arial, Helvetica, sans-serif; }
%bold {font-family: 'OpenSans-Semibold', Arial, Helvetica, sans-serif; }
%taiga {font-family: 'taiga'; }
%mono {font-family: 'courier new', 'monospace';}

%lightbox {
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99910;
    .close {
        @extend %xlarge;
        color: $gray;
        position: absolute;
        right: 2rem;
        top: 1rem;
        transition: color .2s;
        &:hover {
            color: $primary;
        }
    }
    &.open {
        align-content: center;
        align-items: center;
        display: flex;
        justify-content: center;
        opacity: 1;
        transition: opacity .3s ease;
    }
    &.close {
        opacity: 0;
        transition: opacity .3s ease;
    }
    .title {
        text-align: center;
    }
    fieldset {
        margin-bottom: 1rem;
    }
    textarea {
        resize: vertical;
    }
    .button-green,
    .button-gray {
        display: block;
        padding: 12px;
        text-align: center;
    }
}

%loading-spinner {
    animation-timing-function: ease-in-out;
    animation: rotate 1.5s cubic-bezier(.00, .05, .87, 1.04) infinite alternate;
    margin: 0 auto;
    max-height: 1rem;
    max-width: 1rem;
    transform-origin: 32 32;
}

$navbar: 40px;
$main-height: calc(100vh - 40px);