/* Extracted from main.css: in-tray feature
   (src/Main.hx, src/Auth.hx, html/overlays.html) */

img.in-tray-toggle {
    display: none;
    position: fixed;
    bottom: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    z-index: 21;
}

/* Number of in-tray items, shown to the right of the toggle while the in-tray is collapsed.
   Black text with a thin white outline (eight 1px shadows) so it reads on any background. */
span.in-tray-count {
    position: fixed;
    bottom: 12px;
    left: 44px;
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    color: black;
    text-shadow:
        -1px -1px 0 white, 0px -1px 0 white, 1px -1px 0 white,
        -1px 0px 0 white, 1px 0px 0 white,
        -1px 1px 0 white, 0px 1px 0 white, 1px 1px 0 white;
    user-select: none;
    z-index: 21;
}

/* Tooltip for the toggle. Starts as a copy of div.movable-tooltip in main.css, but is kept
   separate because that one sits inside the fixed header, below the in-tray in z-order.
   The left position is set by Main.updateInTrayToggleTooltip() to clear the item count. */
div.in-tray-toggle-tooltip {
    position: fixed;
    bottom: 26px;
    transform: translateY(50%);
    background-color: ghostwhite;
    color: black;
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: solid 1px black;
    border-radius: 3px;
    white-space: nowrap;
    animation: in-tray-tooltip-delay 0.8s 1;
    z-index: 22;
}

div.in-tray-toggle-tooltip-shortcut {
    color: dodgerblue;
    text-align: right;
    width: 100%;
    font-variant: small-caps;
    font-size: 0.95em;
    margin-top: 4px;
}

@keyframes in-tray-tooltip-delay {
    0% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* The height follows the content (one or more rows of items). When collapsed, the whole
   panel is slid just below the bottom of the screen. */
div.in-tray-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    background-color: navy;
    padding: 0px;
    color: white;
    z-index: 20;
}

/* Separates the in-tray from the list area above, which is also navy without a background
   picture. A pseudo-element rather than a border, so it can stop short of the right edge. */
div.in-tray-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 10px;
    height: 1px;
    background-color: white;
}

/* Hidden over a background picture (see Main.setBackground), and while expanding or
   collapsing, where the moving 1px line looks jerky */
div.in-tray-container.in-tray-over-texture::before,
div.in-tray-container.in-tray-animate-show::before,
div.in-tray-container.in-tray-animate-hide::before {
    display: none;
}

div.in-tray-content {
    padding: 8px;
    padding-left: 48px;
}

div.visible-in-tray {
    transform: none;
}

/* The expand/collapse animations are only applied while the user manually expands/collapses
   the in-tray (see Main.toggleInTray), so there is no animation on startup or login, or when
   the in-tray reappears after changing screens */
div.in-tray-container.in-tray-animate-show {
    animation: show-in-tray 0.3s linear;
}

div.in-tray-container.in-tray-animate-hide {
    animation: hide-in-tray 0.3s linear;
}

@keyframes show-in-tray {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes hide-in-tray {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Hover and selection for in-tray items start as copies of button.hover-list and
   button.list.selected-list in lists.css, since the list-of-lists buttons also sit on a
   navy background. Kept separate so they can evolve independently. */
button.hover-in-tray-item {
    box-shadow: 1px 1px 0px 0px teal, -1px -1px 0px 0px teal;
}

/* Drag and drop insertion marker: a vertical bar centred in the 16px gap to the left of the
   target item. Starts as a rotated copy of div.dnd-marker in listitem.css. */
div.in-tray-dnd-marker {
    visibility: hidden;
    position: absolute;
    top: 0;
    right: 100%;
    width: 4px;
    height: 100%;
    margin-right: 6px;
    z-index: 1;
    background-color: deepskyblue;
    border: 1px solid white;
    border-radius: 3px;
}

.in-tray-target div.in-tray-dnd-marker {
    visibility: visible;
}

/* The "+" sentinel after the last in-tray item. Sized and spaced like an in-tray item
   (button.listitem and button.listitem.intrayitem in listitem.css), with a white border
   and no background. */
button.in-tray-add-item {
    position: relative;
    /* Four per row - must match IN_TRAY_ITEMS_PER_ROW in Items.hx */
    width: 23%;
    margin: 5px 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    vertical-align: middle;
    border: 1px solid white;
    border-radius: 4px;
    outline: none;
    background: none;
    color: white;
    font-weight: bold;
    user-select: none;
}

/* Starts as a copy of button.hover-in-tray-item */
button.hover-in-tray-add-item {
    box-shadow: 1px 1px 0px 0px teal, -1px -1px 0px 0px teal;
}

/* Starts as a copy of the in-tray item selection below */
button.in-tray-add-item.in-tray-add-item-selected {
    outline: 3px solid gold;
    outline-offset: -1px;
}

/* An outline rather than a thicker border, so selection doesn't affect the layout. Like
   button.listitem.selected in main.css, this avoids relying on border-growth/margin-shrink
   cancelling out, which sub-pixel rounding at non-100% browser zoom can throw off. */
button.listitem.intrayitem.in-tray-selected {
    outline: 3px solid gold;
    outline-offset: -1px;
}

/* Contextual menu for in-tray items (src/menus/InTrayMenu.hx). Starts as a copy of
   div.contextmenu in menus.css, but fixed, and opened above the item by
   InTrayMenu.show(), which sets its bottom and right. It and its backdrop sit above the
   in-tray, its toggle and the toggle's tooltip. */
div.in-tray-menu {
    position: fixed;
    color: black;
    background-color: white;
    border-radius: 0px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 0px;
    padding-right: 0px;
    border: 1px solid black;
    margin-bottom: 4px;
    z-index: 24;
    text-align: left;
    /* Not inside the item button, so the button's font is set explicitly (as in
       div.background-menu in menus.css) */
    font-family: "Open Sans", "IBM Plex Sans", sans-serif;
    font-weight: bold;
    font-size: small;
}

/* Catches the click that dismisses the menu. Starts as a copy of div.transparent in
   main.css, which is below the in-tray. */
div.in-tray-menu-backdrop {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 23;
    opacity: 0;
}

/* Starts as a copy of div.menu-element in menus.css */
div.in-tray-menu-element {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 12px;
    padding-right: 12px;
    display: flex;
    align-items: center;
}

div.in-tray-menu-element:hover {
    background-color: deepskyblue;
}

/* Starts as a copy of span.context-menu-shortcut in menus.css */
span.in-tray-menu-shortcut {
    color: dodgerblue;
    text-align: right;
    width: 100%;
    font-variant: small-caps;
    font-size: 1em;
}

/* Mobile: larger touch targets and text, starting as copies of the div.menu-element rules
   in menus.css and mobile.css */
@media only screen and (max-width: 1024px) {
    div.in-tray-menu-element {
        padding-top: 7px;
        padding-bottom: 7px;
        font-size: 17px;
    }
}

/* MOBILE IN-TRAY SCREEN (src/Main.hx, html/mobileintray.html). There is no sliding panel on
   mobile; the in-tray has its own screen, which looks like a single list column. */

/* Starts as a copy of div.column and div.column-content (main.css and mobile.css) */
div.mobile-in-tray {
    width: 96%;
    margin: auto;
    margin-bottom: 125px;
    padding-top: 8px;
    background-color: ghostwhite;
    color: black;
}

div.mobile-in-tray-content {
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Starts as a copy of button.listitem.selected in main.css */
button.listitem.mobile-in-tray-item.mobile-in-tray-selected {
    outline: 3px solid mediumblue;
    outline-offset: -1px;
}

/* The "+" sentinel after the last item. Starts as a copy of button.additem in listitem.css */
button.mobile-in-tray-add-item {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-radius: 4px;
    outline: none;
    font-weight: bold;
    color: black;
    background-color: ghostwhite;
    border: 1px solid ghostwhite;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

/* Starts as a copy of button.additem.selected in main.css */
button.mobile-in-tray-add-item.mobile-in-tray-add-item-selected {
    border: 3px solid mediumblue;
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Dark mode, starting as copies of the div.column, button.additem and button.selected rules
   in themes.css */
body.dark {
    div.mobile-in-tray {
        background-color: darkslategrey;
    }

    button.listitem.mobile-in-tray-item.mobile-in-tray-selected {
        outline-color: deepskyblue;
    }

    button.mobile-in-tray-add-item {
        color: white;
        background-color: darkslategrey;
        border: 1px solid darkslategrey;
    }

    button.mobile-in-tray-add-item.mobile-in-tray-add-item-selected {
        border: 3px solid deepskyblue;
    }
}

/* Takes the place of the radio button that lists have on the mobile lists screen, so the
   in-tray's entry lines up with them. Same size and margins as img.radio in lists.css. */
div.mobile-in-tray-radio-spacer {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    margin-right: 12px;
}

/* Fills the positions of buttons that don't apply on the in-tray's mobile move bar, so the
   other buttons stay where they are on the regular move bar (see Toolbar.hx) */
button.minibar-spacer {
    visibility: hidden;
}