@import '../mixins';
@import 'tw';

/*
 * The setup guide, on the bottom edge of the card it belongs to.
 *
 * Roomier than the rest of the card on purpose: this is the only block on the
 * screen somebody reads rather than scans.
 */
/*
 * A band across the card between the way out and the form, not a strip on its
 * bottom edge. Hairlines on both sides, because it now has a neighbour below
 * it as well as above.
 */
.mhub-guide {
    box-shadow: inset 0 1px 0 $slate-100, inset 0 -1px 0 $slate-100;
    background: rgba(248, 250, 252, 0.7);
}

/*
 * Open, the strip is a block somebody is reading rather than a line they are
 * scanning past, so it gets a little more room above the first step than a
 * closed strip needs below its own label.
 */
.mhub-guide.is-open .mhub-guide__btn {
    padding-bottom: 10px;
}

/*
 * The question, then the button that answers it.
 *
 * The disclosure used to take the whole row so every pixel of the strip was a
 * target, which pushed the way out to the far right of 960px - past the edge of
 * what anybody reading the question can see. Sitting the two together costs
 * some target width and buys the only thing that matters here: being noticed.
 *
 * Wraps rather than overflows, because the two together are wider than a narrow
 * screen.
 */
.mhub-guide__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.mhub-guide__btn {
    display: flex;
    align-items: center;
    gap: 6px;

    /* Sized to its words, so whatever follows sits next to them rather than
       at the far end of a 960px row where it leaves the reader field of
       view entirely. Still a 300px target, well past what Fitts asks. */
    flex: none;
    min-width: 0;
    padding: 14px 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: $blue-600; /* 5.44:1 on the strip. */
    font-family: $font-sans;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-align: left;
    cursor: pointer;
    transition: background-color $dur $ease, color $dur $ease;

    &:hover {
        background: $slate-100;
        color: $blue-700; /* 7.1:1. */
    }

    &:focus-visible {
        @include tw-ring-focus;
        outline-offset: -2px;
    }
}

/* Named length. Nobody stuck gambles a click on an unknown. */
.mhub-guide__btn em {
    color: $slate-500; /* 4.76:1. */
    font-style: normal;
    font-weight: 400;
}

.mhub-guide__chev {
    flex: none;
    transition: transform 200ms $ease;
}

.mhub-guide.is-open .mhub-guide__chev {
    transform: rotate(90deg);
}

.mhub-guide__body {
    max-width: 64ch;

    /* Room above the first step. It used to be zero: the list began on the
       exact pixel the strip ended, so the strip and the steps read as one
       block of text rather than a heading and what it opens. */
    padding: 6px 16px 22px;
}

.mhub-guide__steps {
    display: flex;
    flex-direction: column;

    /* Wider than the gap inside a step, which is what makes four items read as
       four things rather than as one block. At 16px against an internal 4px the
       ratio was too close to do that work; 24 against 6 reads as four things. */
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
    }
}

.mhub-guide__n {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;

    /* Optically centred on the first line of the title rather than box-aligned
       to it. Measured: a 22px circle against the 18.85px title line lands 2px
       low on its own, which reads as the number sagging away from its step. */
    margin-top: -2px;
    border-radius: $rounded-full;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px $slate-200;
    color: $slate-500; /* 4.76:1 on white. */
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.mhub-guide__text {
    min-width: 0;

    /*
     * The step heading.
     *
     * Scoped to the line wrapper rather than to any `b` in the step, because
     * the labels belonging to the other site are `b` too - `.mhub-guide__ui`
     * inside the detail paragraph - and they must not pick this up.
     */
    .mhub-guide__line > b {
        color: $slate-800; /* 12.6:1. */
        font-size: 13px;
        font-weight: 600;
        line-height: 1.45;
    }

    p {
        margin: 6px 0 0;
        color: $slate-600; /* 6.65:1. */
        font-size: 12.5px;
        line-height: 1.6;
    }
}

/* The step heading and, where the step goes somewhere, its control. */
.mhub-guide__line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

/*
 * The control at the end of a step line.
 *
 * The whole heading used to be the anchor, which turned one of four step titles
 * blue and underlined it on hover - so the list read as four headings, one of
 * them inexplicably different, and the thing you press was the same object as
 * the thing you read. Smaller than the heading and set after it: a step is a
 * step, this is what you press when you reach it.
 *
 * Every anchor state is answered because wp-admin colours a:hover, a:focus and
 * a:active at a specificity a single class does not beat.
 */
.mhub-guide__go,
.mhub-guide__go:link,
.mhub-guide__go:visited {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: $blue-600; /* 5.44:1 on the strip. */
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    white-space: nowrap;
    transition: color $dur $ease;
}

.mhub-guide__go:hover,
.mhub-guide__go:focus,
.mhub-guide__go:active {
    color: $blue-700; /* 7.1:1. */
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

.mhub-guide__go:focus-visible {
    @include tw-ring-focus;
    border-radius: $rounded-md;
}

.mhub-guide__go svg {
    flex: none;
    color: currentColor;
}

/*
 * Full bleed on Webex and Teams too.
 *
 * Zoom's strip is a direct child of its card, so it runs the card's full
 * width. Those two render the same component inside a panel that carries 16px
 * of its own padding, which left their strip inset - 228 to 1156 against
 * Zoom's 212 to 1172 - so one component drew two different widths depending on
 * which screen it landed on. Pulled back out by exactly that padding.
 */
.form-wrapper .meetinghub-connect-tab-content .accordion > .mhub-guide {
    margin-left: -16px;
    margin-right: -16px;
}

/*
 * The way out, beside the question, open or shut.
 *
 * It spent a version hiding itself once the steps opened, on the grounds that
 * step one carries the same link. That traded one duplicated destination for a
 * button that vanishes when you expand a section, which is worse: the reader
 * then has to go looking for it. Two routes, deliberately, at different
 * weights.
 */
.mhub-guide__ends {
    display: flex;
    align-items: center;
    flex: none;
}

/*
 * The way to the same thing with pictures, at the foot of the open steps.
 *
 * It spent a while at the far end of the strip, which put two ways to learn
 * the same thing opposite each other and left the button that actually goes to
 * Zoom stranded in a band of its own. Down here it answers the reader who has
 * read all four steps and still wants to watch it done, and the strip keeps its
 * right end for the one control that leaves.
 */
.mhub-guide__more,
.mhub-guide__more:link,
.mhub-guide__more:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    /* Past the 24px between steps, so it reads as closing the list rather
       than as a fifth item in it. */
    margin-top: 28px;
    padding: 0;
    color: $slate-600; /* 6.4:1 on the panel. */
    font-family: $font-sans;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: color $dur $ease;
}

.mhub-guide__more:hover,
.mhub-guide__more:focus,
.mhub-guide__more:active {
    color: $slate-900; /* 15.5:1. */
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: none;
}

.mhub-guide__more:focus-visible {
    @include tw-ring-focus;
    outline-offset: -2px;
}

.mhub-guide__more svg {
    flex: none;
    color: $slate-500;
}

/*
 * A label on the other site, set apart from the words telling you to find it.
 *
 * "The Develop menu is at the top right" makes the reader do the separating:
 * which of these words are Zoom's, and which are ours? Marking Zoom's own
 * labels answers that before it is asked, and it turns a sentence you read
 * into a list you can scan for the thing you are staring at.
 *
 * Quiet on purpose. Six of these in one step, each in a colour, would be a
 * ransom note.
 */
.mhub-guide__ui {
    display: inline;
    padding: 1px 5px;
    border-radius: $rounded-md;
    background: $slate-100;
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
    color: $slate-800; /* 12.6:1 on that ground. */
    font-weight: 600;
    white-space: nowrap;
}

/*
 * The one thing that bites after everything already looks finished, so it gets
 * a shape of its own rather than a colour change on a loose line. Amber, and
 * the rule is on the left where the eye enters the block.
 */
.mhub-guide__watch .mhub-guide__ui {
    background: rgba(120, 53, 15, 0.08);
    box-shadow: inset 0 0 0 1px rgba(120, 53, 15, 0.12);
    color: $amber-900; /* 11.6:1 on the amber ground. */
}

.mhub-guide__watch {
    display: block;
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 2px solid $amber-300;
    border-radius: $rounded-lg;
    background: $amber-50;
    color: $amber-900; /* 8.9:1 on the amber ground. */
    font-size: 12.5px;
    line-height: 1.6;
}

@media ( prefers-reduced-motion: reduce ) {

    .mhub-guide__btn,
    .mhub-guide__chev {
        transition: none;
    }
}