/*
 * TheEasyWay's review of products and brands (#1531): the «pages found» cell, and the airings by medium.
 *
 * One icon a platform, always in the same place, so a column of rows reads by position: a link when the page was
 * found, a faded mark when it was not. Seven icons in two lines of four and three — on one line they took the room
 * the numbers needed. A dedicated file because panel pages load Filament's bundle, not the app's: utilities written
 * in the Blade view would have no rule behind them.
 */

.ssmt-review-pages {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* A line of icons: the pages, or — for a brand — the ads under them. Seven pages wrap to four and three. */
.ssmt-review-pages__line {
    display: grid;
    grid-template-columns: repeat(4, max-content);
    gap: 0.25rem 0.375rem;
}

/* The ads line: every paid icon wears the «Ads» badge on its corner (#1135, on every surface), so the icons need
   room for it or the badge sits on the next one. */
.ssmt-review-pages__line + .ssmt-review-pages__line {
    column-gap: 0.875rem;
}

.ssmt-review-pages__item {
    display: inline-flex;
    padding: 0.125rem;
    border-radius: 0.25rem;
}

/* A page the search did not find: there, so the row keeps its shape, and grey where a found one has its colour.
   Grey and not the brand's colour faded (#1540): a missing icon is a control — a link to its search since #1568, and
   the window that adds the page, or the ad, on a double click (#1555) — and a control keeps 3:1 against its
   background (WCAG 1.4.11). Faded to 0.3 it
   measured 1.2:1 in the dark theme and 1.6:1 in the light one; the text's subtle grey is above 4.5:1 in both.
   `grayscale` takes the colour out of the «Ads» badge of a missing ad too. */
.ssmt-review-pages__item--missing {
    filter: grayscale(1);
}

.ssmt-review-pages__item--missing .ssmt-icon {
    color: var(--tew-color-text-subtle);
}

/* A page or an ad a person said is not there (#1568) — taken away, or looked for and not found: struck through, so
   «nobody looked yet» and «looked, there is none» read apart at a glance. The stroke is the muted grey, a step
   stronger than the icon's subtle one, ringed in the row's surface: in the icon's own grey it sank into a solid
   glyph — LinkedIn's square — and could not be seen. It sits on the icon only: the «Ads» badge stays readable. */
.ssmt-review-pages__item--none {
    position: relative;
}

.ssmt-review-pages__item--none::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.25rem;
    height: 0.125rem;
    background: var(--tew-color-text-muted);
    box-shadow: 0 0 0 0.0625rem var(--tew-color-surface);
    transform: translateY(-50%) rotate(-45deg);
    pointer-events: none;
}

/* Found but not to trust yet — low confidence, or a page that was not there when checked: worth a look. */
.ssmt-review-pages__item--weak {
    opacity: 0.6;
}

/* A global page where an Italian one was wanted: a ring in the warning colour, as the old page's amber chip. */
.ssmt-review-pages__item--global {
    box-shadow: inset 0 0 0 1px var(--tew-color-warning);
}

/* The airings by medium: seven icons in fixed cells of four and three, each wide enough for the count that rides
   on the icon's corner and spills to its right — «7,8K» is the widest the data has. */
.ssmt-review-media {
    display: grid;
    grid-template-columns: repeat(4, 2.25rem);
    gap: 0.5rem 0;
}

.ssmt-review-media__item {
    position: relative;
    display: inline-flex;
    justify-self: start;
    padding: 0.125rem;
    color: var(--tew-color-text-muted);
}

/* A medium without airings: in its place so the column reads by position, and visibly off. */
.ssmt-review-media__item--none {
    opacity: 0.3;
}

/* The count, as a notification's: solid primary, the pair the design system gives its text the contrast for. */
.ssmt-review-media__count {
    position: absolute;
    top: -0.375rem;
    left: calc(100% - 0.5rem);
    min-width: 1rem;
    padding: 0 0.25rem;
    border-radius: 9999px;
    background: var(--tew-color-primary-solid);
    color: var(--tew-color-on-primary-solid);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
}

/* The line under a group's title: what was decided, then the buttons that leave the group out or put it back. */
.ssmt-review-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
}

/* A row a person changed: a line down its left edge, in the colour of the person icon on its state. */
.ssmt-review-row--changed > td:first-child {
    box-shadow: inset 3px 0 0 var(--tew-color-info);
}

/* The page's glyph sprite (#1547): its symbols are what the icons' <use> points to, so it is in the page, not shown. */
.ssmt-glyph-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* An icon with a value and nothing to open — an ad's ID no address is made of — is a button to its window (#1540,
   #1555): drawn as the link the others are, with the hand. */
button.ssmt-review-pages__item {
    border: 0;
    background: none;
    cursor: pointer;
}

/* The icons are small: the focus ring is what tells a keyboard reader where it is. */
a.ssmt-review-pages__item:focus-visible,
button.ssmt-review-pages__item:focus-visible {
    outline: 2px solid var(--tew-color-focus-ring);
    outline-offset: 1px;
}