/* Globally available solid-fill circle wipe links/buttons. */

a.button.circle-wipe,
.button.circle-wipe {
    --circle-wipe-bg: #1d5a6b;
    --circle-wipe-fill: #ffffff;
    --circle-wipe-ink: #ffffff;
    --circle-wipe-ink-active: #0f4354;
    --circle-wipe-shadow: 0 18px 34px rgba(16, 83, 94, 0.34);
    --circle-wipe-shadow-active: 0 22px 40px rgba(16, 83, 94, 0.38);
    --circle-wipe-origin-x: -1.55rem;
    --circle-wipe-origin-y: calc(100% + 1.75rem);
    --circle-wipe-reveal-radius: 240%;
    --circle-wipe-duration: 0.84s;
    --circle-wipe-easing: cubic-bezier(0.42, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--circle-wipe-bg) !important;
    background-image: none !important;
    color: var(--circle-wipe-ink) !important;
    border: 0;
    box-shadow: var(--circle-wipe-shadow);
}

.button.circle-wipe > :is(.circle-wipe__label, .circle-wipe__reveal) {
    text-transform: none !important;
    font-variant-caps: normal;
}

a.button.circle-wipe:link,
a.button.circle-wipe:visited,
.button.circle-wipe:link,
.button.circle-wipe:visited {
    color: var(--circle-wipe-ink) !important;
}

.circle-wipe::before,
.circle-wipe::after {
    content: none;
}

.circle-wipe > .circle-wipe__label {
    position: relative;
    z-index: 1;
    color: var(--circle-wipe-ink) !important;
}

.circle-wipe > .circle-wipe__reveal {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: inherit;
    border-radius: inherit;
    background-color: var(--circle-wipe-fill);
    background-image: none;
    color: var(--circle-wipe-ink-active) !important;
    clip-path: circle(0 at var(--circle-wipe-origin-x) var(--circle-wipe-origin-y));
    transition: clip-path var(--circle-wipe-duration) var(--circle-wipe-easing);
    pointer-events: none;
    white-space: inherit;
    will-change: clip-path;
}

a.button.circle-wipe:hover,
a.button.circle-wipe:focus-visible,
.button.circle-wipe:hover,
.button.circle-wipe:focus-visible {
    background-color: var(--circle-wipe-bg) !important;
    background-image: none !important;
    box-shadow: var(--circle-wipe-shadow-active);
}

.circle-wipe:hover > .circle-wipe__reveal,
.circle-wipe:focus-visible > .circle-wipe__reveal {
    clip-path: circle(var(--circle-wipe-reveal-radius) at var(--circle-wipe-origin-x) var(--circle-wipe-origin-y));
}

.landing-link {
    --nexus-action-link-text: var(--circle-wipe-ink);
    min-width: min(100%, 15rem);
    background-color: var(--circle-wipe-bg) !important;
    background-image: none !important;
    color: var(--circle-wipe-ink) !important;
    text-decoration: none;
    letter-spacing: 0.015em;
    text-transform: none !important;
    font-variant-caps: normal;
}

.landing-link > :is(.circle-wipe__label, .circle-wipe__reveal) {
    text-transform: none !important;
    letter-spacing: 0.015em;
    font-variant-caps: normal;
}

.landing-link:link,
.landing-link:visited,
.landing-link > .circle-wipe__label {
    color: var(--circle-wipe-ink) !important;
    -webkit-text-fill-color: var(--circle-wipe-ink) !important;
}

.landing-link > .circle-wipe__reveal {
    color: var(--circle-wipe-ink-active) !important;
    -webkit-text-fill-color: var(--circle-wipe-ink-active) !important;
}

:is(
    .landing-link--primary,
    .circle-wipe--hero-primary,
    .circle-wipe--cta-primary,
    .circle-wipe--apprenticeships-primary,
    .circle-wipe--apprenticeships-cta-primary
) {
    --circle-wipe-bg: #1d5a6b;
    --circle-wipe-fill: #ffffff;
    --circle-wipe-ink: #ffffff;
    --circle-wipe-ink-active: var(--landing-accent-deep, var(--employers-accent-deep, #0f4354));
}

:is(
    .landing-link--secondary,
    .circle-wipe--hero-secondary,
    .circle-wipe--cta-secondary,
    .circle-wipe--apprenticeships-secondary,
    .circle-wipe--apprenticeships-cta-secondary
) {
    --circle-wipe-bg: #277286;
    --circle-wipe-fill: #ffffff;
    --circle-wipe-ink: #ffffff;
    --circle-wipe-ink-active: var(--landing-accent-deep, var(--employers-accent-deep, #0f4354));
}

.landing-link--primary,
.circle-wipe--hero-primary,
.circle-wipe--apprenticeships-primary {
    --circle-wipe-origin-x: -1.45rem;
    --circle-wipe-origin-y: calc(100% + 1.75rem);
}

.landing-link--secondary,
.circle-wipe--hero-secondary,
.circle-wipe--apprenticeships-secondary {
    --circle-wipe-shadow: 0 18px 34px rgba(8, 44, 53, 0.32);
    --circle-wipe-origin-x: calc(100% + 1.45rem);
    --circle-wipe-origin-y: calc(100% + 1.55rem);
}

.circle-wipe--cta-primary,
.circle-wipe--apprenticeships-cta-primary {
    --circle-wipe-origin-x: -1.3rem;
    --circle-wipe-origin-y: calc(100% + 1.45rem);
}

.circle-wipe--cta-secondary,
.circle-wipe--apprenticeships-cta-secondary {
    --circle-wipe-origin-x: calc(100% + 1.35rem);
    --circle-wipe-origin-y: -1.45rem;
}

.landing-link--primary {
    --circle-wipe-origin-x: -1.35rem;
    --circle-wipe-origin-y: calc(100% + 1.45rem);
}

.landing-link--secondary {
    --circle-wipe-shadow: 0 16px 30px rgba(8, 44, 53, 0.24);
    --circle-wipe-shadow-active: 0 20px 36px rgba(8, 44, 53, 0.28);
    --circle-wipe-origin-x: calc(100% + 1.2rem);
    --circle-wipe-origin-y: -1.2rem;
}

@media (max-width: 1080px) {
    .circle-wipe {
        --circle-wipe-reveal-radius: 400%;
    }
}