@use 'mixins';

@include mixins.on-desktop {
    .on-mobile {
        display: none !important;
    }

    #messages > :hover {
        opacity: 1;
    }
}

@include mixins.on-mobile {
    .no-mobile {
        display: none !important;
    }

    footer {
        position: relative;
        flex-direction: column;
        align-items: center;
        gap: 16px;

        > div {
            justify-content: center !important;
            width: 100%;

            &:nth-child(2) {
                flex-wrap: wrap;
                gap: 8px;
            }
        }
    }

    #home {
        h1 {
            font-size: 2em;
        }
    }

    #features {
        > div {
            flex-direction: column !important;
            margin-bottom: 40px;

            > div {
                max-width: 100% !important;
            }
        }

        p { font-size: inherit; }

        .media > * {
            width: 100%;
            height: auto;
        }
    }

    #session {
        flex-direction: column;
    }

    #board {
        transition: none;
    }

    #log {
        position: fixed;
        min-width: 100%;
        max-width: 100%;
        bottom: 0;
        min-height: 240px;
        max-height: 50vh;
        z-index: 6;
        transition: 0.15s;
        box-shadow: 0 0 24px 6px #000a;
        border-radius: 12px 12px 0 0;
        background-color: var(--color-background);

        &.hidden {
            box-shadow: 0 0 24px 0px #0000;
            transform: translateY(100%);
        }
    }

    #messages {
        padding: 0;
        border: 4px solid var(--color-background);
        border-radius: inherit;
        box-sizing: border-box;
        margin-bottom: auto;
    }

    #chat {
        > textarea {
            min-height: 38px;
            border: none;
            margin: 0;
            border-top: 1px solid var(--color-input-underline);
            padding: 4px 6px;
        }

        > div {
            flex-direction: row;
            padding-right: 2px;
        }
    }

    .panel.dialog {
        min-width: 50vw;
        max-width: 90vw;
    }

    #initiativeBar {
        min-width: 0;
        max-width: calc(100vw - (32px + 36px + 16px));
        right: 16px;
        overflow-x: auto;
        padding: 8px 0 !important;
    }

    .roster {
        flex-wrap: nowrap;
        justify-content: initial;
        padding-left: 10px;
    }

    .char {
        min-width: 48px;
        pointer-events: none;

        .step-input {
            display: none;
        }

        &:last-of-type {
            padding-right: 10px;
        }
    }

    .tab {
        height: 36px !important;
    }

    @media (orientation: portrait) {
        #maps {
            transform: translateY(48px) !important;
        }
    }
}
