@import '../variables.scss';

.esh-orders {
    min-height: 80vh;
    overflow-x: hidden;
    $header-height: 4rem;

    &-header {
        background-color: #00A69C;
        height: $header-height;
    }

    &-back {
        color: rgba($color-foreground-brighter, .4);
        line-height: $header-height;
        text-decoration: none;
        text-transform: uppercase;
        transition: color $animation-speed-default;

        &:hover {
            color: $color-foreground-brighter;
            transition: color $animation-speed-default;
        }
    }

    &-titles {
        padding-bottom: 1rem;
        padding-top: 2rem;
    }

    &-title {
        text-transform: uppercase;
    }

    &-items {
        $height: 2rem;
        height: $height;
        line-height: $height;
        position: relative;

        &:nth-of-type(2n + 1) {
            &:before {
                background-color: $color-background-bright;
                content: '';
                height: 100%;
                left: 0;
                margin-left: -100vw;
                position: absolute;
                top: 0;
                width: 200vw;
                z-index: -1;
            }
        }
    }

    &-item {
        font-weight: $font-weight-semilight;

        &--hover {
            opacity: 0;
            pointer-events: none;
        }
    }

    &-items:hover &-item--hover {
        opacity: 1;
        pointer-events: all;
    }

    &-link {
        color: $color-secondary;
        text-decoration: none;
        transition: color $animation-speed-default;

        &:hover {
            color: $color-secondary-dark;
            transition: color $animation-speed-default;
        }
    }

    &-detail {

        &-section {
            padding-bottom: 30px;
        }

        &-title {
            font-size: 25px;
        }
    }
}