#PageInSystemAdvertising {
    .ant-tabs {
        .ant-tabs-nav {
            .ant-tabs-extra-content {
                padding-right: 15px;

                .tabs-extra--btn-new {
                    border: 0px;
                    box-shadow: none;
                    padding: 0px;
                    align-items: center;
                    display: flex;

                    span {
                        font-weight: 300;
                    }

                    &:hover,
                    &:focus {
                        svg,
                        span {
                            color: $mainPrimary;
                        }
                    }

                    svg {
                        margin-right: 5px;
                    }

                    &::after {
                        display: none !important;
                    }
                }
            }
        }
    }
    @media (max-width: 425px) {
        .ant-table-wrapper {
            .ant-table-cell {
                font-size: 16px !important;
            }
        }
    }
}

// Modal renders via antd's portal (document.body), outside
// #PageInSystemAdvertising's DOM subtree, so this can't be nested under
// that id -- scoped to the modal's own className instead. Matches the
// "Upload Image" placeholder box to the same 194px height as the
// after-upload preview (.logo-container-1's <img>) so picking an image
// doesn't shift the layout.
.promotions-modal {
    // Same circular remove-image badge as #PageCrm's .logo-container /
    // .x-mark-button (page_crm.scss), re-scoped here -- that CSS is nested
    // under #PageCrm, which doesn't wrap this modal (antd portals it to
    // document.body), so it never applied and the button rendered as a
    // plain, unstyled link icon instead of the corner badge.
    .logo-container {
        display: block;
        position: relative;
        // The button (inside Popconfirm) sits before the <img> in the
        // markup; as inline-level siblings they shared this container's
        // line box, whose height comes from the ambient font-size/
        // line-height -- that reserved space above the image is why the
        // corner badge (anchored to *this* container's edges) landed well
        // below and left of the image's actual top-right corner instead
        // of right on it. line-height: 0 collapses that reserved space so
        // this container's box hugs the image exactly.
        line-height: 0;

        .x-mark-button {
            position: absolute;
            top: -9px;
            right: -9px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            border-radius: 50%;
            background-color: $mainPrimary;
            width: 18px;
            height: 18px;
            font-size: 9px;
            line-height: 1;

            svg {
                color: white;
                font-size: 11px;
            }
        }

        img {
            display: block;
            // !important as a safety net: this used to be set only via
            // inline style, and if a stale HMR-cached element ever keeps
            // an old inline style, an external-stylesheet !important rule
            // is the one thing guaranteed to still win over it.
            //
            // contain, not cover: cover crops to fill the box, which
            // zooms in hard on any uploaded image whose aspect ratio
            // doesn't match this box -- confirmed wrong against a
            // reference screenshot of the correct look (whole image
            // visible, no cropping).
            width: 100% !important;
            height: 194px !important;
            object-fit: contain !important;
            border: 1px solid #d9d9d9;
            border-radius: 5px;
        }
    }

    // antd's <Upload> wraps children in .ant-upload-select, which defaults
    // to display: inline-block sized to its content -- without this, the
    // placeholder box below shrinks to fit the icon+"Upload" text instead
    // of filling the column, leaving a visibly undersized box with blank
    // space to its right.
    .ant-upload.ant-upload-select {
        display: block;
        width: 100%;
    }

    .promo-image-upload-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        height: 194px;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        cursor: pointer;
        color: $mainPrimary;
        font-weight: 500;

        svg {
            font-size: 18px;
        }
    }
}

// Ticker admin preview -- same marquee mechanics/look as the real banner
// (resources/sass/pages/page-ticker/page-ticker.scss in s5_laravel), just
// inline instead of fixed to the viewport since this only ever renders
// inside the settings form.
//
// Fixed colors, NOT var(--yellow): the hub and every spoke each have their
// own independently-configured theme primary color, so a var(--yellow)
// preview here could never reliably predict what any given spoke actually
// renders (confirmed -- vluxeo.test's own theme is orange). APS uses
// the side menu hover/focus look (brown, white text). The ticker is a hub-authored, cross-tenant banner, so
// it intentionally does not follow each site's local theme -- keep these
// hex values in sync with the identical set in s5_laravel's
// page-ticker.scss.
$tickerBg: #a65127;
$tickerBorder: #a65127;
$tickerLink: #ffffff;
// same as the side menu's active icon ($sideBarIconColorActive)
$tickerIconColor: var(--sub, #ffffff);

.ticker-preview {
    background-color: $tickerBg;
    // border: 1px solid $tickerBorder;
    color: #ffffff;
    padding: 6px 10px 5px 10px;
    overflow: hidden;

    &__viewport {
        overflow: hidden;
        position: relative;
        height: 1.6em;
    }

    &__track {
        display: inline-flex;
        white-space: nowrap;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        // `left` percentages resolve against the containing block (this
        // viewport), unlike `transform: translateX()` which resolves
        // against the track's own (content) width -- with a narrow
        // preview box the two happened to look about the same, but they
        // diverge badly in the real, much wider banner (page-ticker.scss
        // in s5_laravel), so both are kept in lockstep on this formula.
        animation: ticker-preview-scroll 22s linear infinite;

        &:hover {
            animation-play-state: paused;
        }
    }

    &__track-content {
        display: inline-flex;
        align-items: center;
    }

    &__message {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        margin-right: 40px;

        svg {
            flex-shrink: 0;
            color: $tickerIconColor;
        }

        p {
            display: inline;
            margin: 0;
        }

        a {
            color: $tickerLink;
            text-decoration: underline;
        }
    }
}

@keyframes ticker-preview-scroll {
    from {
        left: 100%;
    }
    to {
        left: -100%;
    }
}