/* The course card's menu.
 *
 * Split from card.css when the menu grew levels: the card's own sheet was near the size a file here
 * is allowed to be, and a menu with a confirmation step is a thing of its own. Loaded with the card,
 * after it.
 */

/* Every row is glyph first, then words, packed to where reading starts -- the right in Hebrew and
   Arabic, the left in English and Russian -- as the design draws it. */

/* ---- the menu on the card ---------------------------------------------------------------------- */

.cil-card__titleRow { position: relative; }

.cil-cardMenu {
    position: absolute;
    z-index: 20;
    /* Hung from the ⋮ button, as every "menu open" frame draws it: 8px under the 24px glyph, its edge
       on the glyph's outer edge, opening into the card. The glyph sits at the row's end and its top. */
    inset-block-start: 32px;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 168px;
    border: 1px solid var(--cil-black-light-2);
    border-radius: 10px;
    background: var(--cil-white);
    box-shadow: 0 8px 24px -4px rgba(31, 32, 32, 0.16), 0 1px 3px 0 rgba(31, 32, 32, 0.08);
}
/* Opened from the other side when the card sits at the edge of a row and the panel would other-
   wise hang off the page. Only for browsers without popovers; the rest are placed by the script. */
.cil-cardMenu.is-flipped { inset-inline-end: auto; inset-inline-start: 0; }

/* Where popovers exist the panel opens in the top layer, above every box that could clip it -- the
   home page's carousels hide whatever spills out of their track, which cut the menu off at the card's
   edge. The browser's own popover rules centre, pad and colour it; these undo that, and card-menu.js
   gives it its place beside the title. */
.cil-cardMenu[popover] { margin: 0; padding: 0; color: inherit; }
.cil-cardMenu:popover-open { position: fixed; inset: auto; }

.cil-cardMenu__level { display: flex; flex-direction: column; }

.cil-cardMenu__item {
    display: flex;
    /* Border-box: a link does not size like a button, and a full-width row with padding would be
       wider than the panel and spill out of it on the side the text starts from. */
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding-inline: 14px;
    border: 0;
    background: var(--cil-white);
    color: var(--cil-black-dark-1);
    font-family: inherit;
    font-size: 13px;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cil-cardMenu__item:hover { background: var(--cil-blue-light-3); color: var(--cil-blue-dark-3); }
.cil-cardMenu__item:hover .cil-cardMenu__icon { color: var(--cil-blue-dark-3); }
.cil-cardMenu__item:focus-visible {
    outline: 2px solid var(--cil-blue-dark-1);
    outline-offset: -2px;
}
.cil-cardMenu__icon { display: inline-flex; flex: 0 0 auto; color: var(--cil-blue-regular-7); }
/* The way back out of the share level, pointing at the level it returns to. */

.cil-cardMenu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cil-cardMenu__rule { display: block; height: 1px; background: var(--cil-black-light-2); }
.cil-cardMenu__level > .cil-cardMenu__rule:last-child { display: none; }

/* Nothing could be copied (card-menu.js): the link under the row, selected, to copy by hand. */
.cil-cardMenu__byHand {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 14px 12px;
}
.cil-cardMenu__byHandWords { font-size: 12px; line-height: 1.4; color: var(--cil-black-dark-1); }
.cil-cardMenu__byHandField {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid var(--cil-black-light-5);
    border-radius: 6px;
    background: var(--cil-white);
    color: var(--cil-black-dark-1);
    font-family: inherit;
    font-size: 12px;
}
.cil-cardMenu__byHandField:focus { outline: 2px solid var(--cil-blue-dark-1); outline-offset: -1px; }

/* Pressed, the row darkens a step past its hover, as the design draws it. */
.cil-cardMenu__item:active { background: var(--cil-blue-light-7); }
/* Copied, as the admin copies (design-system/copy-value.js and .css, on the site's palette): the label
   steps up out of the row and a tick draws itself where it was, the row holds the house green, and a
   band of it crosses. Hover is held off meanwhile, so the pointer that copied does not repaint it. */
.cil-cardMenu__copy { position: relative; overflow: hidden; transition: background-color .2s ease, color .2s ease; }
.cil-cardMenu__copyWords { position: relative; display: inline-flex; align-items: center; min-width: 0; overflow: hidden; }
.cil-cardMenu__copy .cil-cardMenu__label { transition: transform .24s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; }
.cil-cardMenu__tick { position: absolute; inset-block: 0; inset-inline-start: 0; margin-block: auto; opacity: 0; }
.cil-cardMenu__tick path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.cil-cardMenu__copy.is-done,
.cil-cardMenu__copy.is-done:hover { background-color: var(--cil-green-light-3); color: var(--cil-green-dark-1); }
.cil-cardMenu__copy.is-done .cil-cardMenu__icon { color: var(--cil-green-dark-1); }
.cil-cardMenu__copy.is-done .cil-cardMenu__label { transform: translateY(-140%); opacity: 0; }
.cil-cardMenu__copy.is-done .cil-cardMenu__tick { opacity: 1; }
.cil-cardMenu__copy.is-done .cil-cardMenu__tick path { animation: cil-card-tick-draw .45s ease-out .15s forwards; }
.cil-cardMenu__copy.is-taken {
    background-image: linear-gradient(90deg, transparent 0%, var(--cil-green-light-9) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 55% 100%;
    animation: cil-card-copy-sweep .75s ease-out forwards;
}
@keyframes cil-card-tick-draw { to { stroke-dashoffset: 0; } }
@keyframes cil-card-copy-sweep { from { background-position: -135% 0; } to { background-position: 245% 0; } }

/* `hidden` is a display:none the browser applies at a weaker weight than any rule of ours, so a
   panel declared flex would ignore it and sit open. Said explicitly, for the panel and its levels. */
.cil-cardMenu[hidden],
.cil-cardMenu__level[hidden] { display: none !important; }


/* ---- a level's header, the way back, and leaving ---------------------------------------------- */

.cil-cardMenu__item--back { font-weight: 600; color: var(--cil-black-dark-4); }
.cil-cardMenu__item--back .cil-cardMenu__icon { color: var(--cil-blue-dark-1); }
/* The arrow is drawn pointing right, which is "back" in Hebrew and Arabic. English and Russian read the
   other way, so it turns round for them. */
[dir="ltr"] .cil-cardMenu__icon--back svg { transform: scaleX(-1); }

/* Leaving a course is the one row that cannot be undone from here, so it is the one row in red. */
.cil-cardMenu__item--danger,
.cil-cardMenu__item--danger .cil-cardMenu__icon { color: var(--cil-red-regular-5); }
.cil-cardMenu__item--danger:hover { background: var(--cil-red-light-1); color: var(--cil-red-regular-5); }
.cil-cardMenu__item--danger:hover .cil-cardMenu__icon { color: var(--cil-red-regular-5); }

.cil-cardMenu__confirm { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.cil-cardMenu__note { margin: 0; color: var(--cil-black-regular-6); font-size: 12px; text-align: start; }
.cil-cardMenu__danger,
.cil-cardMenu__cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: 12px;
    border: 0;
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.cil-cardMenu__danger { height: 40px; background: var(--cil-red-regular-5); color: var(--cil-white); }
.cil-cardMenu__danger:hover { background: var(--cil-red-regular-7); }
.cil-cardMenu__danger[disabled] { opacity: 0.6; cursor: progress; }
.cil-cardMenu__cancel { height: 36px; background: none; color: var(--cil-blue-dark-1); }
.cil-cardMenu__cancel:hover { background: var(--cil-blue-light-1); }
.cil-cardMenu__danger:focus-visible,
.cil-cardMenu__cancel:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 2px; }

/* ---- the mail level: two radios, the LMS's answer chosen ---------------------------------------- */

/* A row hidden for a course that sends no mail. Rows are flex, which outweighs the bare `hidden`. */
.cil-cardMenu__item[hidden],
.cil-cardMenu__rule[hidden] { display: none !important; }

.cil-cardMenu__choices { display: flex; flex-direction: column; }
.cil-cardMenu__choice { position: relative; }
/* The input stays in the page for the keyboard and the screen reader; the design's glyph is what shows. */
.cil-cardMenu__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cil-cardMenu__radioRing { stroke: var(--cil-black-regular-5); transition: stroke 0.15s ease; }
.cil-cardMenu__radioDot { fill: var(--cil-blue-dark-1); opacity: 0; transition: opacity 0.15s ease; }
.cil-cardMenu__radio:checked + .cil-cardMenu__icon .cil-cardMenu__radioRing { stroke: var(--cil-blue-dark-1); }
.cil-cardMenu__radio:checked + .cil-cardMenu__icon .cil-cardMenu__radioDot { opacity: 1; }
.cil-cardMenu__choice:has(.cil-cardMenu__radio:focus-visible) {
    outline: 2px solid var(--cil-blue-dark-1);
    outline-offset: -2px;
}
/* Waiting on the LMS, or saving to it. */
.cil-cardMenu__choice:has(.cil-cardMenu__radio:disabled) { cursor: progress; }
.cil-cardMenu__choices[aria-busy="true"] .cil-cardMenu__choice { opacity: 0.6; }
.cil-cardMenu__mailNote { padding: 10px 14px 12px; }

@media (prefers-reduced-motion: reduce) {
    .cil-cardMenu__radioRing,
    .cil-cardMenu__radioDot { transition: none; }
    .cil-cardMenu__copy, .cil-cardMenu__copy .cil-cardMenu__label { transition: none; }
    .cil-cardMenu__copy.is-done .cil-cardMenu__tick path { animation: none; stroke-dashoffset: 0; }
    .cil-cardMenu__copy.is-taken { animation: none; background-image: none; }
}

/* What a screen reader hears after leaving a course. Nobody sees it. */
.cil-card__live {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    white-space: nowrap;
}