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

/*
 * One back control, on every screen that has one.
 *
 * Quiet at rest - it is the way out, not the reason you opened the page - and
 * it only takes a ground once the pointer is on it. Both states are spelled
 * out for the anchor form because wp-admin colours `a:hover`, `a:focus` and
 * `a:active` at specificity (0,1,1), which outranks a single class.
 */
.mhub-back,
.mhub-back:link,
.mhub-back:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 4px;

    /* Pulled left by its own padding so the label starts on the page's
       left edge rather than a step inside it. */
    margin: 0 0 12px -8px;

    /* 34px of target under a 13px label: the glyph is small, the thing you
       have to hit is not. */
    min-height: 34px;
    padding: 0 10px 0 8px;
    border: 0;
    border-radius: $rounded-lg;
    background: transparent;
    color: $slate-600; /* 6.63:1 on wp-admin's #F0F0F1 page ground. */
    font-family: $font-sans;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.005em;
    text-decoration: none;
    cursor: pointer;
    transition: color $dur $ease, background-color $dur $ease;
}

.mhub-back:hover,
.mhub-back:focus,
.mhub-back:active {
    background: rgba(15, 23, 42, 0.055);
    color: $slate-900; /* 15.9:1. */
    text-decoration: none;
    box-shadow: none;
}

.mhub-back:focus-visible {
    @include tw-ring-focus;
}

.mhub-back__chevron {
    flex: none;
    transition: transform $dur $ease;
}

/* Two pixels left. Enough to read as a direction, not enough to notice as an
   animation - and it is the only thing on the control that moves. */
.mhub-back:hover .mhub-back__chevron,
.mhub-back:focus-visible .mhub-back__chevron {
    transform: translateX(-2px);
}

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

    .mhub-back,
    .mhub-back__chevron {
        transition: none;
    }

    .mhub-back:hover .mhub-back__chevron,
    .mhub-back:focus-visible .mhub-back__chevron {
        transform: none;
    }
}