/* =========================================================
   EKC Accordion
   ========================================================= */

:root {

    --ek-section-bg-1: green;
    --ek-section-bg-2: Brown;
    --ek-section-bg-3: purple;
    --ek-section-bg-4: DarkCyan;
    --ek-section-bg-5: DarkBlue;

    --ek-accordion-side-width: 40px;

    --ek-section-padding-hor: 40px;
    --ek-section-padding-vert: 20px;
}


/* ---------------------------------------------------------
   Section
   --------------------------------------------------------- */

.ek-display-accordion {
    overflow: hidden;

    border: 1px solid var(--ek-border);
    border-radius: var(--ek-radius);
}

/* Header Backgrounds */

.ek-header-bg-1 {
    background-color: var(--ek-section-bg-1);
}

.ek-header-bg-2 {
    background-color: var(--ek-section-bg-2);
}

.ek-header-bg-3 {
    background-color: var(--ek-section-bg-3)
}

.ek-header-bg-4 {
    background-color: var(--ek-section-bg-4);
}

.ek-header-bg-5 {
    background-color: var(--ek-section-bg-5);
}

/* Section Backgrounds */

.ek-section-bg-1 {
    background-color: color-mix(
        in srgb,
        var(--ek-section-bg-1) 10%,
        transparent
    );
}

.ek-section-bg-2 {
    background-color: color-mix(
        in srgb,
        var(--ek-section-bg-2) 10%,
        transparent
    );
}

.ek-section-bg-3 {
    background-color: color-mix(
        in srgb,
        var(--ek-section-bg-3) 10%,
        transparent
    );
}

.ek-section-bg-4 {
    background-color: color-mix(
        in srgb,
        var(--ek-section-bg-4) 10%,
        transparent
    );
}

.ek-section-bg-5 {
    background-color: color-mix(
        in srgb,
        var(--ek-section-bg-5) 10%,
        transparent
    );
}

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */

.ek-form-section h3.ek-form-section-heading {
    margin: 0;
    padding: 0;
}

.ek-display-accordion .ek-form-section-header {
    width: 100%;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        var(--ek-gap)
        var(--ek-accordion-side-width);

    align-items: center;

    padding: var(--ek-section-padding-vert) var(--ek-section-padding-vert);

    border: 0;
    background: var(--ek-bg); 

    color: var(--ek-text);

    font: inherit;
    text-align: left;

    cursor: pointer;
}

/* ---------------------------------------------------------
   Header icon
   --------------------------------------------------------- */

.ek-form-section-icon {
    width: 28px;
    height: 28px;

    opacity: .35;

    margin-right: var(--ek-gap);

    background-color: currentColor;

    -webkit-mask-image: var(--ek-icon);
    mask-image: var(--ek-icon);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* ---------------------------------------------------------
   Title
   --------------------------------------------------------- */

.ek-display-accordion .ek-form-section-title {
    min-width: 0;

    margin: 0;

    color: inherit;

    font-size: var(--ek-font-xl);
    font-weight: 400;
}

/* ---------------------------------------------------------
   Chevron
   --------------------------------------------------------- */

.ek-accordion-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    pointer-events: none;
}

.ek-accordion-chevron::before {
    content: "";

    width: 10px;
    height: 10px;

    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;

    transform: rotate(45deg);

    transition:
        transform .2s ease;
}

.ek-accordion-chevron.is-open::before {
    transform: rotate(225deg);
}

/* Header chevron */

.ek-display-accordion
.ek-form-section-header
.ek-accordion-chevron {

    grid-column: 4;

    justify-self: center;
    align-self: center;

    opacity: .35;
}

/* Bottom chevron */

.ek-display-accordion
.ek-form-section-collapse
.ek-accordion-chevron {

    color: var(--ek-text-muted);
}

/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.ek-display-accordion
.ek-form-section-content {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        var(--ek-accordion-side-width);

    gap: var(--ek-gap-sm);

    padding-inline: var(--ek-section-padding-vert);
    padding-block: 0;

    overflow: hidden;
    opacity: 1;

    background-color: color-mix(
        in srgb,
        black 3%,
        transparent
    );

    transition:
        height .3s ease,
        opacity .3s ease;
}

@media (max-width: 600px) {

    .ek-display-accordion
    .ek-form-section-header {
        padding: var(--ek-gap-sm);
    }

    .ek-display-accordion
    .ek-form-section-content {
        padding-inline: var(--ek-gap-sm);
    }
}


/* ---------------------------------------------------------
   Fields
   --------------------------------------------------------- */

.ek-form-section-fields {
    min-width: 0;

    align-self: start;
    align-content: start;

    padding:
        var(--ek-section-padding-hor)
        0
        var(--ek-section-padding-vert);
}

.ek-form-section-fields.ek-form-grid {
    align-items: start;
    row-gap: 0;
}

/* ---------------------------------------------------------
   Side / chain column
   --------------------------------------------------------- */

.ek-form-section-side {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    align-self: stretch;

    padding:
        0
        0
        calc(var(--ek-gap) * 2);
}

.ek-form-section-chain {
    flex: 1;

    width: 100%;
    min-height: 40px;

    background-color: var(--ek-disabled-text);

    -webkit-mask-image:
        url("../../../images/icons/chain_bg2.svg");
    mask-image:
        url("../../../images/icons/chain_bg2.svg");

    -webkit-mask-repeat: repeat-y;
    mask-repeat: repeat-y;

    -webkit-mask-position: center bottom;
    mask-position: center bottom;

    -webkit-mask-size: auto;
    mask-size: auto;
}


/* ---------------------------------------------------------
   Collapsed state
   --------------------------------------------------------- */

.ek-display-accordion.is-collapsed
.ek-form-section-content {

    opacity: 0;
}



/* ---------------------------------------------------------
   Bottom collapse control
   --------------------------------------------------------- */

.ek-form-section-collapse {

    /* CHANGED
       No longer part of the fields grid.
       It lives inside .ek-form-section-side.
    */

    width: 50%;
    min-height: var(--ek-button-height);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    gap: 4px;

    /* CHANGED */
    margin-top: 0;

    padding: 0 4px 8px 4px;

    border: 1px solid var(--ek-border);
    border-radius: var(--ek-radius);
    background: transparent;

    font: inherit;

    cursor: pointer;
}

/* ---------------------------------------------------------
   Handle graphic
   --------------------------------------------------------- */

.ek-form-section-handle {
    display: block;

    width: 8px;
    height: 16px;

    margin-bottom: 8px;

    flex-shrink: 0;

    background-color: var(--ek-disabled-text);

    -webkit-mask-image:
        url("../../../images/icons/handle_bg.svg");
    mask-image:
        url("../../../images/icons/handle_bg.svg");

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;

    transition:
        background-color .2s ease;
}


/* ---------------------------------------------------------
   Bottom chevron
   --------------------------------------------------------- */

.ek-form-section-collapse .ek-chevron {
    flex-shrink: 0;
}


/* ---------------------------------------------------------
   Close label
   --------------------------------------------------------- */

.ek-form-section-collapse-label {
    font-size: var(--ek-font-sm);
    line-height: 1;

    color: var(--ek-text-muted);
}

/* ---------------------------------------------------------
   Header hover / focus
   --------------------------------------------------------- */

.ek-display-accordion
.ek-form-section-header:hover,
.ek-display-accordion
.ek-form-section-header:focus,
.ek-display-accordion
.ek-form-section-header:focus-visible {

    background: var(--ek-bg);
    color: var(--ek-error);
}

/* ---------------------------------------------------------
   Close button
   --------------------------------------------------------- */

.ek-display-accordion
.ek-form-section-collapse,
.ek-display-accordion
.ek-form-section-collapse:hover,
.ek-display-accordion
.ek-form-section-collapse:focus,
.ek-display-accordion
.ek-form-section-collapse:focus-visible,
.ek-display-accordion
.ek-form-section-collapse:active {

    background: transparent;
    color: inherit;
}

/* ---------------------------------------------------------
   Close button hover / focus
   --------------------------------------------------------- */

.ek-display-accordion .ek-form-section-collapse:hover {
    background-color: var(--ek-error);
}

.ek-form-section-handle,
.ek-form-section-collapse
.ek-accordion-chevron,
.ek-form-section-collapse-label {

    transition:
        background-color .2s ease,
        color .2s ease;
}


.ek-form-section-collapse:hover
.ek-form-section-handle,
.ek-form-section-collapse:focus-visible
.ek-form-section-handle {

    background-color: var(--ek-bg);
}


.ek-form-section-collapse:hover
.ek-accordion-chevron,
.ek-form-section-collapse:focus-visible
.ek-accordion-chevron,
.ek-form-section-collapse:hover
.ek-form-section-collapse-label,
.ek-form-section-collapse:focus-visible
.ek-form-section-collapse-label {

    color: var(--ek-bg);
}

/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .ek-display-accordion {
        --ek-accordion-side-width: 36px;
    }

    .ek-display-accordion
    .ek-form-section-header {
        padding: 8px 10px;
    }

    .ek-form-section-icon {
        width: 22px;
        height: 22px;
    }

    .ek-display-accordion
    .ek-form-section-title {
        font-size: var(--ek-font-md);
    }

    .ek-display-accordion
    .ek-form-section-content {
        gap: var(--ek-gap);

        padding-inline: 10px;
        padding-block: 0;
    }
}