@import "dxHelpers/button";
@import "dxHelpers/reset";
@import "dxHelpers/text";
@import "dxHelpers/card";

:host {
    width: 100%;

    --dx-c-tree-graphic-color: var(--dx-g-indigo-vibrant-40);
    --dx-c-featured-content-header-padding-horizontal: var(
        --dx-g-page-padding-horizontal
    );
    --dx-c-featured-content-header-padding-vertical: var(--dx-g-spacing-6xl);
    --dx-c-featured-content-main-content-max-width: 840px;
    --dx-c-bottom-image-width: calc(
        100vw - var(--dx-g-page-padding-horizontal-lg) * 2
    );
    --dx-c-bottom-image-height: calc(var(--dx-c-bottom-image-width) / 2);
    --dx-c-moon-graphic-color: var(--dx-g-indigo-vibrant-40);
    --dx-c-featured-content-header-image-container-transform: scale(0.7)
        translateY(14px);
    --dx-c-featured-content-header-image-padding-top: calc(
        50% + var(--dx-c-featured-content-header-padding-horizontal) / 2
    );
    --dx-c-featured-content-header-image-margin-right: calc(
        var(--dx-c-featured-content-header-padding-horizontal) * -1
    );
    --dx-c-featured-content-header-image-border-radius: var(--image-radius) 0 0
        var(--image-radius);
}

.container-layout {
    padding: var(--dx-c-featured-content-header-padding-vertical)
        var(--dx-c-featured-content-header-padding-horizontal);
}

.title-bar {
    padding: 0 40px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 0 0 2px #0003;
    color: var(--label-color);
}

@media screen and (max-width: 500px) {
    .title-bar {
        padding: 16px 30px;
        min-height: 125px;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 0 0 2px #0003;
        color: var(--label-color);
    }
}

.title-bar .left-div {
    margin-right: 20px;
}

.title-bar .right-div {
    display: flex;
    height: 100%;
    align-items: center;
}

.title-bar h1 {
    color: var(--label-color);
}

.title-bar p {
    color: var(--label-color);
}

.dark-mode-button {
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--dx-g-dark-mode-toggle-button-color);
    border: var(--dx-g-dark-mode-toggle-button-border);
    border-radius: 4px;
    cursor: pointer;
}

.dark-mode-icon {
    height: 20px;
    width: 20px;
    background-size: 20px 20px;
    background-image: var(--dx-g-dark-mode-toggle-icon);
}

.container {
    --image-radius: var(--dx-g-spacing-smd);

    /* content padding of text and image within the graphic */
    --vertical-padding: var(--dx-g-spacing-6xl);

    /* actual spacing between bottom of graphic and rest of page content */
    --bottom-spacing: var(--dx-g-spacing-4xl);
    --item-spacing: var(--dx-g-spacing-xl);
    --swoop-z-index: 11;
    --label-color: var(--dx-themed-featured-content-header-text-color);

    position: relative;
    background-image: var(--dx-themed-featured-content-header-background-swoop);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

.container.variant_intense {
    background-image: var(
        --dx-themed-featured-content-header-background-swoop-intense
    );
}

/* LAYOUTS */

.img-placement_inline .container-layout {
    display: grid;
    grid-template-areas: "label label" "main image";
    grid-template-columns: 50% auto;
    grid-gap: 0 80px;
}

.img-placement_below .container-layout {
    margin-bottom: calc(var(--dx-c-bottom-image-height) / 2);
}

.container:not(.img-placement_below) {
    overflow: hidden;
}

/* BOTTOM GRAPHIC */

.bg-image-container {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.bg-trees {
    top: initial;
    right: initial;
    bottom: calc(var(--padding-bottom) * -1 - 10px);
    left: 0;
    width: 100%;
    transform: var(--dx-c-featured-content-header-image-container-transform);
}

.trees-mobile {
    display: none;
}

.bg-trees::before {
    content: "";
    background-color: var(--dx-c-tree-graphic-color);
    height: 2px;
    width: 10000px;
    position: absolute;
    left: 1px;
    transform: translateX(-100%);
    top: 1px;
}

.bg-moon {
    top: initial;
    right: initial;
    bottom: calc(var(--padding-bottom) * -1 - 10px);
    left: 0;
    width: 100%;
    transform: var(--dx-c-featured-content-header-image-container-transform);
}

.moon-mobile {
    display: none;
}

.bg-moon::before {
    content: "";
    background-color: var(--dx-c-moon-graphic-color);
    height: 2px;
    width: 10000px;
    position: absolute;
    left: 1px;
    transform: translateX(-100%);
    top: 1px;
}

.bg-codey {
    height: 100%;
    width: 100%;
    transform-origin: right;
    transform: translate(110%, -110%);
    top: unset;
}

.codey-mobile {
    display: none;
}

@media screen and (max-width: 1024px) {
    .bg-codey {
        width: 300px;
        margin-top: -50px;
    }

    .bg-codey > svg {
        width: 100%;
    }
}
@media screen and (max-width: 960px) {
    .bg-codey {
        display: none;
    }
}

.custom-bg-trial::after {
    content: "";
    background-image: url("https://developer.salesforce.com/ns-assets/trial-left.svg"),
        url("https://developer.salesforce.com/ns-assets/trial-right.svg");
    background-position: var(--dx-g-page-padding-horizontal) 50px,
        right 15px top;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    .custom-bg-trial::after {
        background-image: url("https://developer.salesforce.com/ns-assets/trial-left.svg");
        background-position: 48px 30px;
        background-size: contain;
    }
}

.custom-bg-big-moon::after {
    content: "";
    background-image: url("https://developer.salesforce.com/ns-assets/big-moon.svg");
    background-position: top right;
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.blue-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    background-image: url("https://developer.salesforce.com/ns-assets/blue-circle.svg");
    top: 110px;
    right: 230px;
    left: unset;
    width: 126px;
    height: 126px;
    z-index: 1;
}

@media screen and (max-width: 1230px) {
    .custom-bg-big-moon::after,
    .blue-circle {
        display: none;
    }
}

/* Z INDEX STUFF */

.label,
.featured-content-main-content,
.image-container {
    position: relative;
    z-index: var(--swoop-z-index);
}

/* IMAGE */

.image-container {
    display: block;
    grid-area: image;
    height: 0;
    padding-top: 50%;
    z-index: calc(var(--swoop-z-index) + 2);
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(24 24 24 / 10%);
    border-radius: var(--image-radius);
    object-fit: cover;
}

a.image-container > img {
    transition: var(--dx-g-transition-filter-2x);
}

.img-placement_below .image-container {
    margin-top: var(--item-spacing);
    margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
}

/* MAIN CONTENT AREA */

.featured-content-main-content {
    grid-area: main;
    max-width: var(--dx-c-featured-content-main-content-max-width);
}

.featured-content-main-content > * {
    z-index: 10;
}

/* SLOT */

.slot-container {
    display: none;
    margin-top: var(--dx-g-spacing-xl);
}

.has-slotted .slot-container {
    display: block;
}

/* TEXT */

.title-link {
    transition: var(--dx-g-transition-hue-1x);
}

.label {
    grid-area: label;
    color: var(--label-color);
}

.dx-text-display-2 {
    padding-bottom: var(--dx-g-spacing-sm);
    display: block;
}

/* BUTTONS */

.buttons {
    display: flex;
    padding-top: var(--item-spacing);
    padding-bottom: var(--item-spacing);
}

dx-button {
    display: inline-block;
    padding-right: var(--dx-g-spacing-lg);
}

/* AUTHORS */

.authors {
    padding-top: var(--dx-g-spacing-sm);
    padding-bottom: var(--item-spacing);
}

dx-image-and-label {
    --dx-c-image-and-label-text-color: var(--dx-g-text-heading-color);

    display: inline-block;
    padding-right: var(--dx-g-spacing-lg);
}

/* SHARED LINK HOVERING */

.container.link-hovered a.image-container > img {
    filter: var(--dx-g-button-image-filter-hover);
}

.container.link-hovered .title-link {
    color: var(
        --dx-themed-featured-content-header-title-link-light-hover-color
    );
}

.container.link-hovered.variant_intense .title-link {
    color: var(
        --dx-themed-featured-content-header-title-link-intense-hover-color
    );
}

.variant_intense {
    --label-color: var(--dx-themed-featured-content-header-intense-label-color);
}

.variant_intense dx-image-and-label {
    --dx-c-image-and-label-text-color: white;
}

.variant_intense .title,
.variant_intense .body {
    color: white;
}

@media screen and (max-width: 1401px) {
    .img-placement_below .image-container {
        padding-top: var(--dx-c-featured-content-header-image-padding-top);
        margin-top: var(--item-spacing);
        margin-right: var(--dx-c-featured-content-header-image-margin-right);
    }

    .img-placement_below img {
        border-radius: var(--dx-c-featured-content-header-image-border-radius);
    }
}

@media screen and (max-width: 1024px) {
    .container {
        --vertical-padding: 80px;
        --bottom-spacing: var(--dx-g-spacing-2xl);
        --item-spacing: var(--dx-g-spacing-md);
    }

    .img-placement_inline .container-layout {
        display: grid;
        grid-template-areas: "label" "image" "main";
        grid-template-columns: 100%;
        grid-gap: 0;
    }

    .img-placement_inline .image-container {
        margin-bottom: 20px;
    }

    .img-placement_below .image-container {
        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.72);
    }

    .dx-text-display-6 {
        font-size: var(--dx-g-text-xl);
    }

    .dx-text-display-2 {
        font-size: var(--dx-g-text-2xl);
        line-height: var(--dx-g-spacing-2xl);
    }

    .dx-text-body-1 {
        font-size: var(--dx-g-text-base);
        letter-spacing: 0;
        line-height: var(--dx-g-spacing-lg);
    }

    .buttons {
        flex-direction: column;
    }

    dx-button {
        padding-bottom: var(--dx-g-spacing-sm);
    }

    .authors {
        padding-top: 0;
    }

    dx-image-and-label {
        display: block;
        padding-bottom: var(--dx-g-spacing-sm);
    }

    .trees {
        display: none;
    }

    .trees-mobile {
        display: block;
    }

    .moon {
        display: none;
    }

    .moon-mobile {
        display: block;
    }
}

@media screen and (max-width: 600px) {
    .img-placement_below .image-container {
        margin-bottom: calc(var(--dx-c-bottom-image-height) * -0.8);
    }
}

@media screen and (max-width: 420px) {
    .img-placement_below .image-container {
        margin-bottom: calc(var(--dx-c-bottom-image-height) * -1);
    }
}