/* ------------------------------------------------------------------------------
*
*  # Main typography
*
*  Main typography overrides, including custom content
*
*  Version: 1.2
*  Latest update: Nov 25, 2015
*
* ---------------------------------------------------------------------------- */


// Headings
// -------------------------

// All headings
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: @heading-letter-spacing;

    // Labels/badges
    > .label,
    > .badge {
        vertical-align: middle;
        margin-top: -2px;

        &.pull-right {
            margin-top: 3px;
        }
    }

    small {
        font-size: @font-size-base;

        &.display-block {
            margin-top: 3px;
        }
    }
}


// Large headings
h1, h2, h3,
.h1, .h2, .h3 {
    > [class*=icon-] {
        top: -2px;
    }

    // Small font size
    small {
        font-size: @font-size-base;
    }
}


// Heading with divider
.heading-divided {
    margin-bottom: (@line-height-computed - 5);
    padding-bottom: (@line-height-computed / 2);
    border-bottom: 1px solid @panel-default-border;
}



// Emphasis & misc
// -------------------------

// Remove outlines
a,
button,
input,
textarea {
    outline: 0;
}


// Mark element
mark,
.mark {
    background-color: @text-color;
    padding: 2px 6px;
    color: #fff;
    border-radius: @border-radius-small;
}


// SVG sizing
svg {
    display: block;

    // Inline
    .svg-inline & {
        display: inline-block;
    }

    // Centered object
    .svg-center & {
        margin: auto;
    }
}


// Large circle icon
.letter-icon {
    width: @icon-font-size;
    display: block;
}


// Content divider
.content-divider {
    text-align: center;
    position: relative;
    z-index: 1;

    // Text container
    > span {
        background-color: @body-bg;
        display: inline-block;
        padding-left: @padding-base-horizontal;
        padding-right: @padding-base-horizontal;

        // Change bg color if inside panel
        .panel &,
        .tab-content-bordered &,
        .modal & {
            background-color: @panel-bg;
        }

        // Add line
        &:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            height: 1px;
            background-color: #ddd;
            width: 100%;
            z-index: -1;
        }
    }
}


// Styled icon
.icon-object {
    border-radius: 50%;
    text-align: center;
    margin: 10px;
    border-width: 3px;
    border-style: solid;
    padding: @content-padding-large;
    display: inline-block;

    // Icon size
    > i {
        font-size: (@icon-font-size * 2);
        top: 0;
    }
}


// Image thumbnail preview
.img-preview {
    max-height: 70px;
}


// Video container
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;

    iframe,
    object,
    embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}


// Status mark
.status-mark {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 50%;
    border: 2px solid;

    .dropdown-menu > .active & {
        background-color: #fff;
        border-color: #fff;
    }
}


//
// Extra horizontal spacing for elements
//

// Left
.position-left {
    margin-right: @element-horizontal-spacing;
}

// Right
.position-right {
    margin-left: @element-horizontal-spacing;
}



// Contextual backgrounds
// -------------------------

.bg-primary {
    a&:hover,
    a&:focus {
        background-color: @brand-primary;
    }
}

.bg-success {
    color: #fff;
    .bg-variant(@brand-success);

    a&:hover,
    a&:focus {
        background-color: @brand-success;
    }
}

.bg-info {
    color: #fff;
    .bg-variant(@brand-info);

    a&:hover,
    a&:focus {
        background-color: @brand-info;
    }
}

.bg-warning {
    color: #fff;
    .bg-variant(@brand-warning);

    a&:hover,
    a&:focus {
        background-color: @brand-warning;
    }
}

.bg-danger {
    color: #fff;
    .bg-variant(@brand-danger);

    a&:hover,
    a&:focus {
        background-color: @brand-danger;
    }
}



// Page header
// -------------------------

// Base
.page-header {
    margin: 0;
    padding: 0;
    border-bottom-width: 0;

    // Setup desktop view
    @media (min-width: @grid-float-breakpoint) {
        .heading-elements.collapse {
            display: block;
            visibility: visible;
        }
    }
}

// Dark page header
.page-header-inverse {
    background-color: @page-header-inverse-bg;
    color: #fff;
    margin-bottom: @line-height-computed;

    // Change color of small element
    .page-title small {
        color: fade(#fff, 50%);
    }

    // Breadcrumbs
    > .breadcrumb,
    .page-header-content .breadcrumb {

        // Links
        > li > a,
        > li + li:before {
            color: fade(#fff, 90%);
        }

        // Hovered links
        > li > a:hover,
        > li > a:focus {
            color: #fff;
            .opacity(1);
        }

        // Active item
        > .active {
            color: fade(#fff, 50%);
        }
    }

    // Icon addons color
    .form-control-feedback,
    .input-group-addon {
        color: fade(#fff, 75%);
    }

    // Text links
    .heading-text > a {
        color: #fff;
    }

    // Input fields
    .form-control {
        border-bottom-color: fade(#fff, 30%);
        color: #fff;
        .placeholder(fade(@input-placeholder-light, 75%));

        // Focused
        &:focus {
            border-bottom-color: #fff;
            .box-shadow(0 1px 0 #fff);
        }
    }
    
    // Cover image
    &.has-cover {
        background: url(../images/login_cover.jpg); // feel free to change
        background-size: cover;
    }
}

// White page header
.page-header-default {
    background-color: @page-header-default-bg;
    margin-bottom: @line-height-computed;
    .box-shadow(0 1px 0 0 @navbar-default-border);
    
    // Cover image
    &.has-cover {
        background: url(../images/backgrounds/seamless.png); // feel free to change
    }
}

// Page title
.page-title {
    padding: 32px (@grid-gutter-width + @icon-font-size) 32px 0;
    display: block;
    position: relative;

    // Subtitle
    small {
        margin-left: (@grid-gutter-width / 2);
        display: inline-block;

        &:before {
            content: '/';
            margin-right: ((@grid-gutter-width / 2) + 5);
        }

        &.display-block {
            margin-left: 0;
            display: block;
            
            &:before {
                content: none;
            }
        }
    }

    // Add left spacing to align with text
    i ~ small.display-block {
        margin-left: (@icon-font-size + (@grid-gutter-width / 2) + 5);
    }


    //
    // Change page header size by changing title vertical spacing
    //

    // Large
    .page-header-lg & {
        padding-top: (32px) + 5;
        padding-bottom: (32px) + 5;
    }

    // Small
    .page-header-sm & {
        padding-top: (32px) - 5;
        padding-bottom: (32px) - 5;
    }

    // Mini
    .page-header-xs & {
        padding-top: (32px) - 10;
        padding-bottom: (32px) - 10;
    }


    // Remove margin from headings
    h1, h2, h3, h4, h5, h6 {
        margin: 0;
    }

    // Remove right padding on desktop
    @media (min-width: @grid-float-breakpoint) {
        padding-right: 0;
    }
}

// Content itself
.page-header-content {
    position: relative;
    background-color: inherit;
    padding: 0 @grid-gutter-width;  

    // With custom colored bottom border
    &[class*=border-bottom-] + .breadcrumb-line {
        border-top: 0;
    }
}



// Text styling
// -------------------------

// Font weights
.text-black {
    font-weight: 900;
}
.text-bold {
    font-weight: 700;
}
.text-semibold {
    font-weight: 500;
}
.text-regular {
    font-weight: 400;
}
.text-light {
    font-weight: 300;
}
.text-thin {
    font-weight: 100;
}


// Font style
.text-italic {
    font-style: italic;
}
.text-highlight {
    padding: 4px 6px;
}


// Font size
.text-size-large {
    font-size: @font-size-large;
}
.text-size-base {
    font-size: @font-size-base;
}
.text-size-small {
    font-size: @font-size-small;
}
.text-size-mini {
    font-size: @font-size-small - 1;
}



// Lists
// -------------------------

// Unordered and Ordered lists
ul,
ol {
    padding-left: 25px;
}



// List options
// -------------------------

// Custom list class
.list {

    // Add vertical spacing to the list items
    > li {
        &,
        .list > li {
            margin-top: @padding-base-vertical;
        }

        // Remove top margin from the first list item
        &:first-child {
            margin-top: 0;
        }
    }


    //
    // Additional sizing
    //

    // Condensed list
    &-condensed {
        > li {
            &,
            .list > li {
                margin-top: (@padding-base-vertical - 4);
            }
        }
    }

    // Extended list
    &-extended {
        > li {
            &,
            .list > li {
                margin-top: (@padding-base-vertical + 4);
            }
        }
    }
}


// List item styling
ul {
    &.list-square {
        list-style-type: square;
    }

    &.list-circle {
        list-style-type: circle;
    }
}


// Inline turns list items into inline-block
.list-inline {
    margin-left: 0;
    font-size: 0;

    // List item
    > li {
        padding-left: 0;
        padding-right: @content-padding-large;
        font-size: @font-size-base;

        &:last-child {
            padding-right: 0;
        }
    }


    //
    // Additional sizing
    //

    // Condensed
    &-condensed {
        > li {
            padding-right: @content-padding-small;
        }
    }

    // Separate
    &-separate {
        > li {
            padding-right: @content-padding-large;
            position: relative;

            // Bullet
            &:before {
                content: '\2022';
                position: absolute;
                right: ((@content-padding-large / 2) - 2);
                color: #ccc;
                top: 1px;
            }

            // Remove bullet from the last child list item
            &:last-child:before {
                content: none;
            }
        }
    }
}

// List with icons
.list-icons {
    padding-left: 0;

    li {
        list-style: none;

        i {
            margin-right: @element-horizontal-spacing;
        }
    }
}



// Icons list
// ------------------------------

// Horizontal icons list
.icons-list {
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    font-size: 0;

    // List item
    > li {
        position: relative;
        display: inline-block;
        margin-left: 5px;
        font-size: @font-size-base;

        &:first-child {
            margin-left: 0;
        }

        // Link
        > a {
            color: inherit;
            display: block;
            .opacity(1);

            &:hover,
            &:focus {
                .opacity(0.75);
            }

            // Remove top edge spacing from iton
            > i {
                top: 0;
            }

            // Caret
            > .caret {
                margin-top: 0;
                margin-bottom: 0;
            }
        }
    }

    // Extended list item spacing
    &-extended > li {
        margin-left: 10px;
    }
}



// Description Lists
// -------------------------

dl {
    margin-bottom: 0;
}
dt {
    margin-bottom: 5px;
    font-weight: 500;

    dd + & {
        margin-top: @line-height-computed;
    }
}

// Horizontal description lists
.dl-horizontal dt {
    @media (min-width: @screen-sm-min) {
        + dd {
            margin-top: @line-height-computed;
        }

        &:first-child + dd {
            margin-top: 0;
        }
    }
}



// Blockquotes
// -------------------------

// Basic styles
blockquote {
    margin: 0;

    // Image
    img {
        height: 42px;
        float: left;
        margin-right: @content-padding-large;

        &.pull-right {
            margin-right: 0;
            margin-left: @content-padding-large;
        }
    }

    // Footer and small texts
    footer,
    small,
    .small {
        font-size: @font-size-base;
        margin-top: @padding-base-vertical;
        display: block;
    }
}


// Opposite alignment of blockquote
.blockquote-reverse,
blockquote.pull-right {
    padding-right: @line-height-computed;
}