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

/*
 * The platform screen's header and section nav.
 *
 * Modelled on DriveHub's page skeleton, so the two plugins read as one house:
 * the page's name on its own ground rather than inside a card, one line under
 * it saying what the screen is for, whatever the page can do on the right, and
 * the sections as an underlined nav that belongs to the header rather than
 * sitting under it as a third strip.
 *
 * This replaces two attempts in a row: a gradient block, which gave the screen
 * identity but a lot of weight for a settings page, and a left rail, which read
 * as a second sidebar beside WordPress's own. The rule under the nav is the
 * only chrome the header needs.
 */

/* ---------------------------------------------------------------- header -- */

.gmt-hero {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: $font-sans;

    * {
        box-sizing: border-box;
    }
}

/*
 * The breadcrumb.
 *
 * A back button says it goes back; a breadcrumb says where. It is also what
 * lets the row underneath begin on the page's own left edge - the button and
 * its hairline used to sit in front of the mark and push the platform's name
 * 136px inward, so the title started further right than every card below it.
 *
 * Pulled left by its own padding, so the word lines up with that edge rather
 * than a step inside it.
 */
.gmt-hero__crumb,
.gmt-hero__crumb:link,
.gmt-hero__crumb:visited {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 0 8px -6px;
    padding: 3px 8px 3px 6px;
    border-radius: $rounded-md;
    color: $slate-600; /* 6.63:1 on wp-admin's page ground. */
    font-family: $font-sans;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
    transition: color $dur $ease, background-color $dur $ease;
}

/* wp-admin colours every anchor state, so each one has to be answered. */
.gmt-hero__crumb:hover,
.gmt-hero__crumb:focus,
.gmt-hero__crumb:active {
    background: rgba(15, 23, 42, 0.05);
    color: $slate-900; /* 15.9:1. */
    text-decoration: none;
    box-shadow: none;
}

.gmt-hero__crumb:focus-visible {
    @include tw-ring-focus;
}

.gmt-hero__crumb svg {
    flex: none;
    color: $slate-500; /* 4.6:1 on the page ground; $slate-400 was 2.5:1. */
}

/*
 * The mark, the name, its state and the one action - on the page's column.
 *
 * No wrapping: this used to be `flex-wrap: wrap`, which is how a header ends
 * up a different height on a narrow screen than on a wide one. The name
 * truncates instead, and the action keeps its corner.
 */
.gmt-hero__body {
    display: flex;
    align-items: center;

    /*
     * The gap between the state and everything left of it. The mark and the
     * name close up below, because they are one object and this is the
     * distance to a different one - at 12px on both sides, proximity said the
     * three were peers.
     */
    gap: 16px;
    padding-bottom: 14px;
}

.gmt-hero__logo + .gmt-hero__title {
    margin-left: -6px; /* 10px between the mark and the name it belongs to. */
}

/*
 * The mark, small.
 *
 * DriveHub's header carries no logo because it has one product to name. These
 * five screens are otherwise identical, so the mark is what tells them apart -
 * but at 36px on a hairline it identifies the page without becoming the page.
 */
.gmt-hero__logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: $radius-control;
    background: #fff;
    box-shadow: $panel-shadow;

    svg {
        display: block;
        width: 26px;
        height: 26px;
    }
}

.gmt-hero__title {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: $slate-900; /* 17.85:1 on the page. */
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -0.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * The state, as a quiet chip. It reports a fact, so it does not compete with
 * the button beside it - and it says it in shape as well as in colour.
 */
.gmt-hero__state {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    margin: 0;

    /* 8 on the left, 9 on the right: the tick's own sidebearing makes up the
       missing pixel. The unconnected chip has no tick, so it takes 9 on both
       sides below - otherwise the word sits a pixel left of centre. */
    padding: 3px 9px 3px 8px;
    border-radius: $rounded-full;
    background: $slate-100;
    color: $slate-600; /* 6.94:1 on the chip. */
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;

    svg {
        flex: none;

        /*
         * Measured on the chip, not on the page. $slate-400 is 2.56:1 against
         * white and only 2.34:1 against this slate ground - the same failure
         * already fixed on the platform cards, left standing here. $slate-500
         * is 4.45:1 on the chip and still reads quieter than the 11.5px label
         * beside it. The connected tick is emerald at 3.58:1.
         */
        color: $slate-500;

        /*
         * A pixel up.
         *
         * Flex centring puts the mark on the middle of the line box, but the
         * glyphs of a line with no descenders - "Not connected" has none - sit
         * above that middle, so a dot centred by the box reads low against the
         * word it belongs to. This admin needs the same correction wherever an
         * icon sits beside text.
         */
        margin-top: -1px;
    }

    /* No glyph, so no sidebearing to compensate for. */
    &:not(.is-on) {
        padding-left: 9px;
    }

    &.is-on {
        background: $emerald-50;
        color: $emerald-700; /* 5.24:1 on the tint. */

        svg {
            color: $emerald-600;
        }
    }
}

/*
 * The next step, one rank below the state it follows.
 *
 * A link and not a button, because on three of these four tabs it is not the
 * step anybody is on - it is the thing waiting for them afterwards, and a
 * button repeated across four settings tabs stops reading as an offer and
 * starts reading as furniture.
 *
 * The plus keeps the brand colour and so does the word, which is the whole of
 * its weight: enough to be found beside a green chip, not enough to compete
 * with the tab strip 18px below it.
 */
.gmt-hero__next,
.gmt-hero__next:link,
.gmt-hero__next:visited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;

    /* Pulled back by its own padding so the words sit on the 16px gap the row
       sets, rather than 25px from the chip. */
    margin-left: -9px;
    padding: 4px 9px;
    border-radius: $rounded-md;
    background: transparent;
    color: $blue-600; /* 4.94:1 on the page ground. */
    font-family: $font-sans;
    font-size: 13px;
    font-weight: 500;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color $dur $ease, color $dur $ease;
}

/* wp-admin colours a:hover, a:focus and a:active at a specificity one class
   does not beat, so all three are answered. */
.gmt-hero__next:hover,
.gmt-hero__next:focus,
.gmt-hero__next:active {
    background: $blue-50;
    color: $blue-700; /* 6.65:1 on that tint. */
    text-decoration: none;
    box-shadow: none;
}

.gmt-hero__next:focus-visible {
    @include tw-ring-focus;
    color: $blue-700;
}

.gmt-hero__next svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: currentColor;

    /* The same optical pixel every icon beside text in this admin needs. */
    margin-top: -1px;
}

/* The page's own action, at the outside edge. */
/*
 * The one action. It is an anchor when it navigates to the meeting form and a
 * button when it opens this screen's own credentials tab, so the reset has to
 * cover both - a bare button inherits neither the family nor the cursor.
 */
.gmt-hero__action,
.gmt-hero__action:link,
.gmt-hero__action:visited {
    border: 0;
    font-family: $font-sans;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: none;

    /* The corner. The state chip used to claim it with an auto margin of its
       own, which pushed whatever followed to the right edge - including the
       link that now sits beside the chip rather than 550px away from it. */
    margin-left: auto;
    min-height: 36px;
    padding: 8px 16px;
    border-radius: $rounded-lg;

    /*
     * Secondary, because it leaves.
     *
     * It was the filled brand blue - the strongest style the plugin has, and
     * the only one wearing it on these four tabs. That put the loudest thing on
     * a settings screen on the one action that goes somewhere else, while the
     * page's own work - Connect, and Save changes - wears the same blue and has
     * to share the room with it the moment either appears.
     *
     * Still a button and still first in the corner, so somebody who has just
     * connected can go straight on. It simply stops outranking the screen it
     * sits on.
     */
    background: #fff;
    box-shadow: 0 0 0 1px $ring-strong, $shadow-xs;
    color: $slate-800; /* 12.6:1 on white. */
    font-size: $text-sm;
    font-weight: 600;
    line-height: $text-sm-lh;
    text-decoration: none;
    transition: background-color $dur $ease, box-shadow $dur $ease, color $dur $ease;
}

.gmt-hero__action:hover,
.gmt-hero__action:focus,
.gmt-hero__action:active {
    background: $slate-50;
    box-shadow: 0 0 0 1px $slate-300, $shadow-xs;
    color: $slate-900;
    text-decoration: none;
}

/* The one piece of brand left on it: enough to say "new", not enough to
   outrank the page. */
.gmt-hero__action svg {
    color: $blue-600;
}

.gmt-hero__action:focus-visible {
    @include tw-ring-focus;
    color: $slate-900;
}

@include respond-to('small') {

    .gmt-hero__action {
        width: 100%;
        min-height: 44px;
    }
}

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

    .gmt-hero * {
        transition: none !important;
    }
}

/*
 * Phones: let the header wrap.
 *
 * In one unwrapping row the status pill and the Create meeting link took the
 * width and the platform's name shrank to nothing. The name stays beside its
 * mark; the pill and the link drop to a second line.
 */
@media ( max-width: 600px ) {

    .gmt-hero__body {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .gmt-hero__title {
        flex: 1 0 auto;
        max-width: calc( 100% - 54px );
    }
}