@import './theme.scss';
@import '../../helpers/_size';
/* HEADER */

/* This works well with panel */
section {
    display: block;
}

.content {
    max-width: 60em;
    margin: 0 auto 1.5em;
    width: 80%;
}

.fullscreen {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
}

/* This works well with spans and maybe even hr */
.divider {
    border-top: 0.05rem solid transparentize(map-get($grays, '500'), 0.5);
    height: 0.1rem;
    margin: 1.8rem 0 1.6rem;
    position: relative;

    &[data-content] {
        margin: 0.8rem 0;
    }

    &--v[data-content]::after,
    &[data-content]::after {
        background: #fff;
        color: map-get($grays, '500');
        content: attr(data-content);
        left: 50%;
        display: inline-block;
        padding: 0 0.4rem;
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
    }

    &--v,
    &--v[data-content] {
        display: block;
        padding: 0.8rem;

        &::before {
            border-left: 0.05rem solid transparentize(map-get($grays, '500'), 0.5);
            bottom: 0.4rem;
            content: '';
            display: block;
            left: 50%;
            position: absolute;
            top: 0;
            transform: translateX(-50%);
        }
    }

    &--v[data-content] {
        left: 50%;
        padding: 0.2rem 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}
/* Hero image div */
.hero-img {
    /* Specify the backgroud image yourself */
    background-size: cover;
}

.parallax-img {
    background-attachment: fixed !important;
}

.hero {
    /* Parent of hero-body */
    -webkit-box-align: stretch;
    align-items: stretch;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Important to stretch height of hero-body */
    -webkit-box-orient: vertical;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .hero-body {
        -ms-flex-positive: 1;
        flex-grow: 1; /* Tells the hero-body to take up the entire space */
        -ms-flex-negative: 0;
        flex-shrink: 0;
        padding: 3rem 1.5rem;
        align-items: center;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
    }
}

.space {
    display: block;
    width: 100%;
    height: 1rem;

    &.large {
        padding: 1rem 0;
    }

    &.xlarge {
        padding: 2rem 0;
    }
}

/* Use for spacing out elements vertically */
.row {
    -ms-flex: 1;
    flex: 1;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    display: flex;

    &::after {
        content: '';
        clear: both;
        display: table;
    }

    &.row--no-wrap {
        -webkit-flex-wrap: nowrap; /* Remove wrapping of the columns by default */
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        overflow-x: auto; /* Can be disabled to remove scroll bar */
    }

    /* GRID */
    .col {
        display: block;
        flex: 1;
        padding: 0.15rem 0.75rem;
    }

    /* Auto align col to left in row */
    .offset-right {
        margin-left: 0;
        margin-right: auto;
    }

    /* Auto align col to middle in row */
    .offset-center {
        margin-left: auto;
        margin-right: auto;
    }
    /* Auto align col to right in row */
    .offset-left {
        margin-left: auto;
        margin-right: 0;
    }

    /* Dividers for mobile layout */
    &.divided [class^='col'],
    &.divided [class*=' col'] {
        box-shadow: 0 -1px 0 0 transparentize(map-get($grays, '500'), 0.5);
    }

    /* Base sizing where everything is 100% width */
    [class^='col-'],
    [class*=' col-'] {
        width: 100%;
        margin-left: 0;
        padding: 0 0.5rem;
    }

    /* Column sizes for various viewports */

    @for $i from 1 through $grid-columns {
        .col-xs-#{$i} {
            width: percentage($number: $grid-width * $i);
        }

        .offset-#{$i} {
            margin-left: percentage($number: $grid-width * $i);
        }
    }

    @for $i from 1 through $grid-columns {
        @include screen-above('xs') {
            .col-sm-#{$i} {
                width: percentage($number: $grid-width * $i);
            }
        }
    }

    @for $i from 1 through $grid-columns {
        @include screen-above('sm') {
            .col-md-#{$i},
            .col-#{$i} {
                width: percentage($number: $grid-width * $i);
            }
        }
    }

    @for $i from 1 through $grid-columns {
        @include screen-above('md') {
            .col-lg-#{$i} {
                width: percentage($number: $grid-width * $i);
            }
        }
    }
    
    @for $i from 1 through $grid-columns {
        @include screen-above('lg') {
            .col-xl-#{$i} {
                width: percentage($number: $grid-width * $i);
            }
        }
    }

    /* Columns without the spacing */
    &.no-space [class^='col-'],
    &.no-space [class*=' col-'] {
        padding: 0;
    }
}

.r {
    /* Legacy row pre 0.5.5 */
    max-width: 100%;
    padding: 0.5rem;
}

.level {
    -webkit-box-align: center;
    -ms-grid-row-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;

    .level-item {
        /* Centers items */
        -webkit-box-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        flex-grow: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    /* Used to stretch the contents of div in level to fill */
    .level-content {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-negative: 1;
        flex-shrink: 1;
        text-align: left;
        width: 100%;
    }
}

/* Width/Height CSS */
@for $value from 1 through 10 {
    .w-#{$value * 10} {
        width: percentage($value / 10);
    }

    .h-#{$value * 10} {
        height: percentage($value / 10);
    }
}

.w-auto {
    width: auto !important;
}

.h-auto {
    height: auto !important;
}

.w-screen {
    width: 100vw;
}

.h-screen {
    height: 100vh;
}

/* Do the actual balancing only on larger screens */
.level,
.level-left,
.level-right {
    @include screen-above('sm') {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

@include screen-below('sm') {

    .level-right {
        margin-left: 1rem;
    }

    /* Keep all level children the same height */
    .level.fill-height {
        -webkit-box-align: stretch; /* Box Align and align items to stretch to make nav-items fill up parent height */
        align-items: stretch;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
}

/* MOBILE */
@include screen-below('sm') {
    .container {
        width: 100%;
    }

    .row {
        margin-top: 0;
    }

    /* Dividers for mobile layout */
    .divided > .row [class^='col-'],
    .divided > .row [class*=' col-'] {
        box-shadow: 0 -1px 0 0 rgba(34, 36, 38, 0.15);
    }
    
    .level.fill-height {
        display: inherit; /* Allow children to expand */
    }

    .hero-body {
        padding: 0;
    }
}