@import "variables";

.intro-admin-ui {
    display: flex;
    flex-direction: column;
    padding: calc(0.05 * var(--width-unit));
    width: calc(2 * var(--width-unit));
    height: calc(2 * var(--width-unit));
    transition: opacity $transition-duration * 2;
    .intro-top-bar {
        background-color: #494949;
        color: #999;
        height: calc(0.3 * var(--width-unit));
        font-size: calc(0.2 * var(--width-unit));
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        user-select: none;
    }
    .intro-content {
        background-color: #fff;
        flex: 1;
        display: flex;

        .intro-nav {
            background-color: #ccc;
            width: calc(0.3 * var(--width-unit));
            padding: calc(0.05 * var(--width-unit));
            margin: 0;
            list-style-type: none;
            li {
                position: relative;
                background-color: #999a9e;
                height: calc(0.05 * var(--width-unit));
                width: calc(0.15 * var(--width-unit));
                margin-bottom: calc(0.08 * var(--width-unit));
                border-radius: calc(0.01 * var(--width-unit));
            }
        }
        .intro-list-view {
            flex: 1;
            padding: calc(0.05 * var(--width-unit));
            margin: calc(0.05 * var(--width-unit));
            list-style-type: none;
            li {
                position: relative;
                background-color: #dedede;
                height: calc(0.05 * var(--width-unit));
                margin-bottom: calc(0.08 * var(--width-unit));
                padding-left: calc(0.08 * var(--width-unit));
                &:before {
                    position: absolute;
                    left: 0;
                    content: '';
                    background-color: #87a8dd;
                    padding: 0;
                    width: calc(0.1 * var(--width-unit));
                    height: calc(0.05 * var(--width-unit));
                }
            }
        }
    }
}