/* DEBUG */
.debug {
    position: fixed;
    z-index: 200;
    bottom: 20px;
    left: 20px;
    height: 50px;
    width: 150px;

    .text {
        width: auto;
        font-size: 1em;
        position: absolute;
        opacity: 0;
        transition: opacity 300ms ease-out;
        color: white;
        background-color: black;
        padding: 10px;
        box-shadow: 3px 2px 10px 0 rgba(0, 0, 0, 0.5);

        &.desktopXL {
            opacity: 1;
        }

    }
}

/* tablet */
@include desktop-xl {
    .debug {
        .text {

            &.desktopXL {
                opacity: 1;
            }
            &.desktopSmall {
                opacity: 0;
            }
            &.tabletLandscape {
                opacity: 0;
            }
            &.tabletPortrait {
                opacity: 0;
            }
            &.mobileLandscape {
                opacity: 0;
            }
            &.mobilePortrait {
                opacity: 0;
            }
        }
    }

}

@include desktop-small-and-below {

    .debug {
        .text {

            &.desktopXL {
                opacity: 0;
            }
            &.desktopSmall {
                opacity: 1;
            }
            &.tabletLandscape {
                opacity: 0;
            }
            &.tabletPortrait {
                opacity: 0;
            }
            &.mobileLandscape {
                opacity: 0;
            }
            &.mobilePortrait {
                opacity: 0;
            }
        }
    }

}

@include tablet-landscape-and-below {
    .debug {
        .text {
            &.desktopXL {
                opacity: 0;
            }
            &.desktopSmall {
                opacity: 0;
            }
            &.tabletLandscape {
                opacity: 1;
            }
            &.tabletPortrait {
                opacity: 0;
            }
            &.mobileLandscape {
                opacity: 0;
            }
            &.mobilePortrait {
                opacity: 0;
            }
        }
    }

}

@include tablet-portrait-and-below {
    .debug {
        .text {
            &.desktopXL {
                opacity: 0;
            }
            &.desktopSmall {
                opacity: 0;
            }
            &.tabletLandscape {
                opacity: 0;
            }
            &.tabletPortrait {
                opacity: 1;
            }
            &.mobileLandscape {
                opacity: 0;
            }
            &.mobilePortrait {
                opacity: 0;
            }
        }
    }

}

@include mobile-landscape-and-below {
    .debug {
        .text {
            &.desktopXL {
                opacity: 0;
            }
            &.desktopSmall {
                opacity: 0;
            }
            &.tabletLandscape {
                opacity: 0;
            }
            &.tabletPortrait {
                opacity: 0;
            }
            &.mobileLandscape {
                opacity: 1;
            }
            &.mobilePortrait {
                opacity: 0;
            }
        }
    }

}

@include mobile-portrait-and-below {
    .debug {
        .text {
            &.desktopXL {
                opacity: 0;
            }
            &.desktopSmall {
                opacity: 0;
            }
            &.tabletLandscape {
                opacity: 0;
            }
            &.tabletPortrait {
                opacity: 0;
            }
            &.mobileLandscape {
                opacity: 0;
            }
            &.mobilePortrait {
                opacity: 1;
            }
        }
    }

}

.title-main-debug {
    background-color: #262425;
    padding: 1em;
    margin: 0;
    margin: 40px 0;
    color: #FFF;

    a, span {
        color: #a09fa0;
        font-family: 'lucien-light';
        font-weight: 200;
        font-size: 1.6em;
    }

    span {
        font-size: 0.6em;
    }

}

.list-debug {
    list-style-type: none;
}