// __Font Sizes__ //
%xsmall {font-size: .5rem;}
%small {font-size: .8rem;}
%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;}
%text {font-family: 'opensans-regular', Arial, Helvetica, sans-serif; line-height: 1.3rem;}
%bold {font-family: 'opensans-semibold', Arial, Helvetica, sans-serif;}
%taiga {font-family: 'taiga';}
%mono {font-family: 'courier new', 'monospace';}

%lightbox {
    background: rgba($white, .95);
    bottom: 0;
    display: none;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99910;
    .close {
        @extend %large;
        position: absolute;
        right: 2rem;
        top: 2rem;
    }
    &.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;
    }
    input,
    textarea,
    select {
        margin-bottom: 1rem;
    }
    textarea {
        resize: vertical;
    }
    .button-green,
    .button-gray {
        display: block;
        padding: 12px;
        text-align: center;
    }
}

// Background
%triangled-bg {
    background: url('/images/bg.png') no-repeat center center;
    background-size: cover;
}

%background-taiga {
    background: url('/images/invitation_bg.jpg') no-repeat center center;
    background-size: cover;
}

%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;
}
