/* Gate column header and cells (GateColumn) */
.airport-gate-header {
    --b-grid-header-text-transform : uppercase;
    --b-grid-header-font-weight    : 600;
    --b-grid-header-color          : var(--airport-text-muted);
    /* 1.75em at the header's .8em font is 1.4em, the same inset as the gate cells */
    --b-grid-header-padding        : 1.75em;

    font-size                      : .8em;
    letter-spacing                 : .05em;

    /* The block padding of the gate header text sets the height of the whole header row */
    .b-grid-header-text {
        --b-grid-header-padding : 1.4em;
    }
}

.airport-gate-cell {
    --b-grid-cell-padding-inline : 1.4em;

    /* Accent on the inline-start edge of the selected gate, flips with the writing direction */
    .b-selected &::before {
        content            : '';
        position           : absolute;
        inset-block        : 0;
        inset-inline-start : 0;
        width              : 3px;
        background         : var(--airport-accent);
        pointer-events     : none;
    }
}

.airport-gate {
    display     : flex;
    align-items : center;
    gap         : 1em;
    min-width   : 0;
}

.airport-gate-badge {
    position        : relative;
    display         : flex;
    flex-shrink     : 0;
    align-items     : center;
    justify-content : center;
    width           : 2.75em;
    height          : 2.75em;
    border          : 1px solid var(--airport-badge-border);
    border-radius   : .4em;
    background      : var(--airport-surface);
    color           : var(--airport-text);
    font-size       : 1.1em;
    font-weight     : 600;

    .b-selected & {
        background   : var(--airport-accent);
        border-color : var(--airport-accent);
        color        : var(--airport-on-accent);
    }
}

.airport-gate-dot {
    --airport-gate-dot-size : .75em;

    position                : absolute;
    inset-block-start       : -.25em;
    inset-inline-end        : -.25em;
    width                   : var(--airport-gate-dot-size);
    height                  : var(--airport-gate-dot-size);
    /* The ring takes the cell background, so it reads as a cut-out */
    border                  : 2px solid var(--b-grid-cell-background);
    border-radius           : 50%;
    background              : var(--airport-status-ontime);

    .b-selected & {
        border-color : var(--b-grid-cell-selected-background);
    }

    &:is(.airport-gate-closed, .airport-gate-warn) {
        background : var(--airport-status-delayed);
    }
}

.airport-gate-info {
    display        : flex;
    flex-direction : column;
    gap            : .15em;
    min-width      : 0;
    white-space    : nowrap;
}

.airport-gate-type {
    font-size   : .9em;
    font-weight : 500;
    color       : var(--airport-text);
}

.airport-gate-state {
    font-size : .85em;
    color     : var(--airport-text-muted);

    &:is(.airport-gate-closed, .airport-gate-warn) {
        color : var(--airport-text-closed);
    }
}