@import "./abstracts/theme.less";

.ui-refresh {
    .page-header {
        background-color: var(--header-bg-v2);
    }

    #header .logo {
        display: none;
    }

    // Need to use the element selector to increase weight otherwise it will be overriden by the
    // a:visited selector if it is declared later
    a.page-header__brand-link {
        display: inline-flex;
        align-items: center;
        height: 100%;
        padding: 16px 24px;
        font-size: var(--font-size-base);
        font-weight: bold;
        background-color: var(--logo-bg);
        // TODO: comment on browser support for clip-path
        clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);

        &:link,
        &:visited {
            color: var(--brand-link-color);
            text-decoration: none;
        }

        &:hover,
        &:focus {
            text-decoration: underline;
            color: var(--brand-link-color-hover-v2);
            text-decoration-color: var(--brand-link-color-hover-v2);
        }

        &:link:focus {
            outline: none;
            color: var(--brand-link-color-active-v2);
            text-decoration-color: var(--brand-link-color-active-v2);

            .page-header__brand-name {
                outline: auto;
            }
        }
    }

    .page-header__hyperlinks a {
        &:hover,
        &:focus,
        &.mouseIsOverMenuSelector {
            background-color: var(--header-link-bg-hover-v2);
        }

        &:active {
            background-color: var(--header-link-bg-active-v2);
        }
    }

    .main-search__input:hover ~ .main-search__icon-leading {
        color: var(--header-link-bg-hover-v2);
    }

    .main-search__input:focus ~ .main-search__icon-leading {
        color: var(--header-link-bg-active-v2);
    }

    .main-search__icon-trailing {
        &:hover,
        &:focus {
            color: var(--header-link-bg-hover-v2);
        }

        &:active {
            fill: var(--header-link-bg-active-v2);
        }
    }

    .am-container.visible .am-button {
        background-color: var(--header-link-bg-active-v2);
    }

    .am-button .am-monitor__count {
        color: var(--monitor-color-v2);
        background-color: var(--monitor-bg-v2);
    }

    .am-button.security-am .am-monitor__count {
        color: var(--sec-monitor-color-v2);
        background-color: var(--sec-monitor-bg-v2);
    }
}
