:root {
    --shadow-shift: 0.3mm;
    --shadow-shift-m: -0.3mm;

    --menu-width: 116px;
}

.start-btn {
    font-size: 7.5pt;

    background-color: rgb(195, 199, 203);
    box-shadow: 0px var(--shadow-shift) 0px 0px rgb(90, 93, 95), var(--shadow-shift) 0px 0px 0px rgb(90, 93, 95), var(--shadow-shift) var(--shadow-shift) 0px 0px rgb(58, 60, 61), var(--shadow-shift-m) var(--shadow-shift-m) 0px 0px rgb(238, 239, 240), 0px var(--shadow-shift-m) 0px 0px rgb(238, 239, 240), var(--shadow-shift-m) 0px 0px 0px rgb(238, 239, 240);
    margin-right: var(--shadow-shift);
    margin-bottom: var(--shadow-shift);

    display: flex;
    flex-wrap: nowrap;
    gap: 3px;
    align-items: center;

    &:disabled,
    &:active {
        background-color: rgb(192, 192, 192);
        color: black;
        box-shadow: -0.2mm var(--shadow-shift-m) 0px 0px black, 0px var(--shadow-shift-m) 0px 0px black, -0.2mm 0px 0px 0px black, var(--shadow-shift) var(--shadow-shift) 0px 0px white, var(--shadow-shift) var(--shadow-shift-m) 0px 0px white, -0.2mm var(--shadow-shift) 0px 0px white;
        
        margin-left: var(--shadow-shift);
        margin-top: var(--shadow-shift);
    }
}

.start-menu {
    display: none;
    flex-wrap: nowrap;
    align-items: flex-end;

    position: absolute;
    margin-left: 2px;
    padding-bottom: 21px;

    width: var(--menu-width);
    height: 100%;

    menu {
        display: flex;
        align-items: stretch;

        position: relative;

        background-color: rgb(192, 192, 192);
        box-shadow: 0px var(--shadow-shift) 0px 0px rgb(90, 93, 95), var(--shadow-shift) 0px 0px 0px rgb(90, 93, 95), var(--shadow-shift) var(--shadow-shift) 0px 0px rgb(58, 60, 61), var(--shadow-shift-m) var(--shadow-shift-m) 0px 0px rgb(238, 239, 240), 0px var(--shadow-shift-m) 0px 0px rgb(238, 239, 240), var(--shadow-shift-m) 0px 0px 0px rgb(238, 239, 240);
        
        padding: 2px 2px 2px 2px;

        z-index: 99;
    }

    .panorama {
        width: 15px;

        align-content: flex-end;

        background-color: gray;

        img {
            width: 100%;
        }
    }

    .menu-list {
        display: flex;
        flex-direction: column;
    }
}

.start-menu.classic {
    .menu-item {
        height: 18px;
        padding-left: 2px;

        img {
            height: 11px;
        }

        #content {
            margin-left: 15px;
        }
    }

    .panorama {
        display: none;
    }

    .menu-list {
        margin-left: 0;
    }
}

.menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;

    height: 27px;
    padding-left: 7px;

    font-family: var(--font);
    font-weight: normal;
    font-size: 6.5pt;

    background-color: rgb(192, 192, 192);

    p {
        text-align: left;
    }

    img {
        height: 17px;
    }

    #content {
        position: absolute;
        margin-left: 24px;
    }

    &:hover,
    &:disabled {
        background-color: rgb(0, 0, 128);
        color: white;
    }
}