@charset "UTF-8";

// Your custom SCSS should be written here...

//Fluidbox fixes
.lightbox-active {
    #body {
        overflow: visible;

        .padding {
            overflow: visible;
        }
    }
}

//Github
#github-contrib {
    i {
        vertical-align: middle;
    }
}

//Featherlight fixes
.featherlight img {
    margin: 0 !important;
}

//Lifecycle
.lifecycle {

    #body-inner {

        ul {
            list-style: none;
            margin: 0;
            padding: 2rem 0 0;
            position: relative;
        }

        ol {
            margin: 1rem 0 1rem 0;
            padding: 2rem;
            position: relative;

            li {
                margin-left: 1rem;
            }

            strong {
                text-decoration: underline;
            }

            ol {
                margin-left: -1rem;
            }

        }

        h3[class*='level'] {
            font-size: 20px;
            position: absolute;
            margin: 0;
            padding: 4px 10px;
            right: 0;
            z-index: 1000;
            color: #fff;
            background: $turquoise;
        }

        ol h3 {
            margin-top: 1rem !important;
            right: 2rem !important;
        }

        .level-1+ol {
            background: lighten($turquoise, 56%);
            border: 4px solid $turquoise;
            color: $green_sea;

            h3 {
                background: $emerald;

            }
        }

        .level-2+ol {
            background: lighten($emerald, 49%);
            border: 4px solid $emerald;
            color: $nephritis;

            h3 {
                background: $peter_river;
            }
        }

        .level-3+ol {
            background: lighten($peter_river, 44%);
            border: 4px solid $peter_river;
            color: $belize_hole;

            h3 {
                background: $wet_asphalt;
            }
        }

        .level-4+ol {
            background: lighten($wet_asphalt, 63%);
            border: 4px solid $wet_asphalt;
            color: $midnight_blue;

            h3 {
                background: $wet_asphalt;
            }
        }
    }
}

#top-bar {
    background: $navbar-bg;
    border-radius: 2px;
    margin: 0rem -1rem 2rem;
    padding: 0 1rem;
    height: 0;
    min-height: 3rem;
    color: diminish(maximize-color-contrast($navbar-bg), 20%);

    a {
        color: diminish(maximize-color-contrast($navbar-bg), 10%);

        &:hover {
            color: diminish(maximize-color-contrast($navbar-bg), 5%);
        }
    }
}

// Github link
#top-github-link {

    @extend %vertical-align;
    position: relative;
    z-index: 1;

    float: right;
    display: block;
}

// Breadcrumbs
#body #breadcrumbs {

    @extend %vertical-align;

    height: auto;
    display: block;
    margin-bottom: 0;
    padding-left: 0;

    line-height: 1.4;

    span {
        padding: 0 0.1rem;
    }
}

// Media Query stuff
@include breakpoint(desktop-only) {
    #sidebar {
        width: $sidebar-width-smaller;
    }

    #body {
        margin-left: $sidebar-width-smaller;
    }
}

@include breakpoint(mobile-only) {
    #sidebar {
        width: $sidebar-width-smaller;
        left: - $sidebar-width-smaller;
    }

    #body {
        margin-left: 0;
        width: 100%;
    }

    .sidebar-hidden {
        overflow: hidden;

        #sidebar {
            left: 0;
        }

        #body {
            margin-left: $sidebar-width-smaller;

            overflow: hidden;
        }

        #overlay {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 10;
            background: rgba(255, 255, 255, .5);
            cursor: pointer;
        }
    }
}

// clipboard
.copy-to-clipboard {
    background-image: url(../images/clippy.svg);
    background-position: 50% 50%;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    width: 27px;
    height: $core-font-size + (.2rem * 2);
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    color: darken($core-text, 10%);
    background-color: $code-bg;
    margin-left: -.2rem;
    cursor: pointer;
    border-radius: 0 2px 2px 0;

    &:hover {
        background-color: darken($code-bg, 5%);
    }

    pre & {
        position: absolute;
        right: 4px;
        top: 4px;
        background-color: #eee;
        border-color: #ddd;
        border-radius: 2px;

        &:hover {
            background-color: #d9d9d9;
        }
    }
}

// Utils
.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}