src/scss/modules/_details.scss
/**
 * DETAILS & SUMMARY
 *
 * @see https://github.com/argob/poncho/blob/master/src/scss/modules/_details.scss
 * @demo en: https://codepen.io/agustinbouillet/pen/dyxZpNz?editors=0100
 * @author Agustín Bouillet <bouilleta@jefatura.gob.ar>
 * Copyright (c) 2025 Argentina.gob.ar
 */
 
/**
 * Variables SCSS
 */
$detailsScope: "details"; // define el alcance del componente, ej.: `details.ar-details`.

// details tag
$detailsPaddingY: 9px;
$detailsPaddingX: 0px;
$detailsBorderColor: #cccccc;
$detailsBorderStyle: solid;
$detailsBorderWidth: 1px;

// summary tag
$summaryPaddingS: 1px; // Padding start
$summaryPaddingE: 1px; // Padding end
$summaryPaddingT: 10px; // Padding top
$summaryPaddingB: 10px; // Padding bottom
$summaryLineHeightSmall: 1.25em;
$summaryLineHeightDefault: 1.35em;

// caret
$circleDefaultSize: 40px; // Tamaño del círculo
$circleSmallSize: 32px; // Tamaño del círculo pequeño
$circleMarginRight: 10px; // Margen entre el círuclo y el inicio de texto

$caretDefaultSize: 26px; // Tamaño del caret, o flecha.
$caretSmallSize: 22px; // Tamaño del caret cuando es pequeño.
$caretColor: var(--arg-negro-600, #444444);
$caretBackground: var(--arg-negro-100, #e9e9e9);

// media queries
$mediaBreakpoint: 768px;
$containerBreakpoint: 350px;
$containerBorderRadius: 3px; // Define el border-radius por defecto
$containerBorderRound: 9px;
$containerMarginT: 0px;
$containerMarginB: 1em;

$contentMarginT: 0.5rem; // margin-top contenido
$contentMarginB: 1rem; // margin-bottom contenido

/* Definiciones para el contenedor */
// Default
$containerSummaryPaddingS: 18px; // padding-left summary
$containerSummaryPaddingE: 9px; // padding-right summary
$containerContentPaddingS: 18px; // padding-left content
$containerContentPaddingE: 18px; // padding-right content
// Left
$containerLeftSummaryPaddingS: 9px; // padding-left summary
$containerLeftSummaryPaddingE: 9px; // padding-right summary
$containerLeftContentPaddingS: 18px; // padding-left content
$containerLeftContentPaddingE: 18px; // padding-right content

/**
 * Definición para los temas de color.
 */
$colorThemes: (
    "warning": (
        caretBackground: var(--arg-amarillo),
        caret: black,
        containerBackground: var(--arg-amarillo-50),
        borderColor: var(--arg-amarillo-400)
    ),
    "success": (
        caretBackground: var(--arg-verde),
        caret: white,
        containerBackground: var(--arg-verde-50),
        borderColor: var(--arg-verde-300)
    ),
    "danger": (
        caretBackground: var(--arg-rojo),
        caret: white,
        containerBackground: var(--arg-rojo-50),
        borderColor: var(--arg-rojo-200)
    ),
    "blanco": (
        caretBackground: var(--arg-blanco),
        caret: black
    ),
    "palta": (
        caretBackground: var(--arg-palta),
        caret: black
    ),
    "primary": (
        caretBackground: var(--arg-azul),
        caret: white,
        containerBackground: var(--arg-primary-50),
        borderColor: var(--arg-primary-200)
    ),
    "azul-morado": (
        caretBackground: var(--arg-azul-morado),
        caret: white
    ),
    "negro": (
        caretBackground: var(--arg-negro-600),
        caret: white
    ),
    "dark": (
        caretBackground: rgb(0 0 0 / 0.35),
        caret: white
    ),
    "light": (
        caretBackground: rgb(255 255 255 / 0.75),
        caret: black
    ),
    "default": (
        caretBackground: #ddd,
        caret: black,
        containerBackground: #f4f4f4,
        borderColor: #ccc
    ),
    "transparent": (
        caretBackground: transparent,
        caret: var(--arg-azul)
    ),
    "rosado": (
        caretBackground: var(--arg-rosado),
        caret: white
    )
);

/**
 * Definiciones para el cambio de tamaño del caret
 */
@mixin caretSmall() {
    > summary {
        --circle-size: #{$circleSmallSize};
        --caret-width: #{$caretSmallSize};
        --summary-line-height: #{$summaryLineHeightSmall};
    }
}

/**
 * Fija el caret a la altura definida por el tamaño del padding top
 */
@mixin caretFixed() {
    > summary {
        &::before {
            top: var(--summary-padding-t);
        }

        &::after {
            top: calc(
                (
                    ((var(--circle-size) / 2) - (var(--caret-width) / 2)) +
                        var(--summary-padding-t)
                )
            );
        }
    }

    &[open] {
        > summary {
            &::after {
                top: calc(
                    ((var(--circle-size) / 2) - (var(--caret-width) / 2)) +
                        var(--summary-padding-t)
                );
            }
        }
    }
}

/**
 * Color de los caret
 *
 * @param {string} $background Color de fondo para el contenedor del caret.
 * @param {string} $fill Color para el caret.
 */
@mixin caretColor($background, $fill) {
    & > summary {
        &::before {
            background: $background;
        }
        &::after {
            background-color: $fill;
        }
    }
}

#{$detailsScope} {
    --icon-close: url('data:image/svg+xml;utf8,<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59,9.79l-4.59,4.58-4.59-4.58-1.41,1.41,6,6,6-6-1.41-1.41Z"></path></svg>');
    --icon-open: url('data:image/svg+xml;utf8,<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.41,15.51l4.59-4.58,4.59,4.58,1.41-1.41-6-6-6,6,1.41,1.41Z"></path></svg>');

    --details-border-color: #{$detailsBorderColor};
    --details-border-style: #{$detailsBorderStyle};
    --details-border-width: #{$detailsBorderWidth};

    --details-padding-x: #{$detailsPaddingX};
    --details-padding-y: #{$detailsPaddingY};

    --summary-line-height: #{$summaryLineHeightDefault};

    --summary-padding-s: #{$summaryPaddingS};
    --summary-padding-e: #{$summaryPaddingE};
    --summary-padding-t: #{$summaryPaddingT};
    --summary-padding-b: #{$summaryPaddingB};

    --content-padding-s: #{$summaryPaddingS};
    --content-padding-e: #{$summaryPaddingE};
    --content-margin-t: #{$contentMarginT};
    --content-margin-b: #{$contentMarginB};

    --circle-size: #{$circleDefaultSize};
    --circle-margin-right: #{$circleMarginRight};
    --caret-width: #{$caretDefaultSize};
    --caret-color: #{$caretColor};
    --caret-background: #{$caretBackground};

    /* Definitions */
    container: {
        type: inline-size;
        name: detailsSize;
    }
    border-width: 0; // reset border-width
    border: {
        bottom: {
            color: var(--details-border-color);
            style: var(--details-border-style);
            width: var(--details-border-width);
        }
    }

    &:last-child {
        border-bottom: 1px solid var(--details-border-color);
    }
    &.details-borderless {
        border: none !important;
    }
    &.details-border-top {
        border-top: 1px solid var(--details-border-color);
    }
    &.details-border-light {
        border-color: rgb(255 255 255 / 0.75) !important;
    }
    &.details-border-dark {
        border-color: rgb(0 0 0 / 0.25) !important;
    }

    summary {
        min-height: calc(
            var(--circle-size) +
                (var(--summary-padding-t) + var(--summary-padding-b))
        );
        line-height: var(--summary-line-height);
        display: flex;
        align-items: center;
        position: relative;
        list-style-type: none;
        cursor: pointer;
        transition: all 0.1s ease-in-out;

        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;

        font-weight: 600;
        padding: {
            top: var(--summary-padding-t);
            bottom: var(--summary-padding-b);
            left: var(--summary-padding-s);
            right: calc(
                var(--circle-size) + var(--details-padding-x) +
                    var(--circle-margin-right) +
                    (var(--summary-padding-s) + var(--summary-padding-e))
            );
        }

        &::-webkit-details-marker {
            display: none;
        }

        &::before {
            content: " ";
            position: absolute;
            background: var(--caret-background);
            height: var(--circle-size);
            width: var(--circle-size);
            border-radius: 50%;
            text-align: center;
            aspect-ratio: 1 / 1 !important;
            left: initial;
            right: var(--summary-padding-e);
        }

        &::after {
            width: var(--caret-width);
            height: var(--caret-width);
            margin: auto;
            vertical-align: -15%;
            -webkit-mask: {
                image: var(--icon-close);
                origin: fill-box;
                repeat: no-repeat !important;
                size: contain;
            }
            mask: {
                image: var(--icon-close);
                origin: fill-box;
                repeat: no-repeat !important;
                size: contain;
            }
            background-color: var(--caret-color);
            content: "";
            position: absolute;
            left: initial;
            right: calc(
                ((var(--circle-size) - var(--caret-width)) / 2) +
                    var(--summary-padding-e)
            );
        }
    }

    &.caret-left {
        > summary {
            padding: {
                left: calc(
                    var(--circle-size) + var(--details-padding-x) +
                        var(--circle-margin-right) + var(--summary-padding-s)
                );
                right: var(--summary-padding-e);
            }

            &::before {
                left: var(--summary-padding-s);
            }

            &::after {
                right: initial;
                left: calc(
                    ((var(--circle-size) - var(--caret-width)) / 2) +
                        var(--summary-padding-s)
                );
            }
        }
    }

    &[open] {
        > summary {
            &::after {
                -webkit-mask: {
                    image: var(--icon-open);
                }
                mask: {
                    image: var(--icon-open);
                }
            }
        }
    }

    /* Creo los caret de color */
    @each $theme-name, $theme-colors in $colorThemes {
        &.caret-#{$theme-name} {
            @include caretColor(
                map-get($theme-colors, caretBackground),
                map-get($theme-colors, caret)
            );
        }
    }

    /* Define los atributos del contenedor para el contenido */
    .ar-details__content {
        background: transparent;
        padding: {
            left: var(--content-padding-s);
            right: var(--content-padding-s);
        }
        margin: {
            top: var(--content-margin-t);
            bottom: var(--content-margin-b);
        }
        line-height: inherit;
    }
    // @todo usar el pseudo elemento cuando esté habilitado
    // &[open]::details-content { }

    // Pega el caret a la altura del padding.
    &.caret-fixed {
        @include caretFixed();
    }

    /* Caret small */
    &.caret-small {
        @include caretSmall();
    }
}

/*
Cuando un elemento en inferior al breakpoint los caret cambian el tamaño
*/
@container detailsSize (max-width: #{$containerBreakpoint}) {
    #{$detailsScope} {
        @include caretSmall();
    }
}

@media all and (max-width: #{$mediaBreakpoint}) {
    #{$detailsScope} {
        @include caretSmall();
    }
}

/**
 * Contenedores
 * Definición para los contenedores de los details
 */
.details-container {
    --container-border-color: #{$detailsBorderColor};
    --container-border-style: #{$detailsBorderStyle};
    --container-border-width: #{$detailsBorderWidth};
    --container-border-radius: #{$containerBorderRadius};
    --container-margin-t: #{$containerMarginT};
    --container-margin-b: #{$containerMarginB};

    border-radius: var(--container-border-radius);
    overflow: hidden;
    position: relative;
    border: {
        color: var(--container-border-color);
        style: var(--container-border-style);
        width: var(--container-border-width);
    }
    margin: {
        bottom: var(--container-margin-b);
        top: var(--container-margin-t);
    }

    &.caret-fixed > details {
        @include caretFixed();
    }

    &.details-container__borderless {
        border: none;
    }
    
    
    &.details-container__round {
        border-radius: $containerBorderRound;
    }
    

    &.details-container__rounded {
        border-radius: calc(#{$circleDefaultSize} / 2 + #{$detailsPaddingY});
    }

    &.details-container__rounded .details-container {
        border-radius: calc(
            #{$circleDefaultSize} / 2 + #{$detailsPaddingY} -
                var(--content-padding-s)
        );
    }

    &.details-container__rounded:has(details.caret-small) {
        border-radius: calc(#{$circleSmallSize} / 2 + #{$detailsPaddingY});
    }

    &.details-container__rounded:has(details.caret-small)
        .details-container:has(details.caret-small) {
        border-radius: calc(
            #{$circleSmallSize} / 2 + #{$detailsPaddingY} -
                var(--content-padding-s)
        );
    }

    &:not(:is(.details-container__borderless)) details:last-of-type {
        border-bottom: none;
    }
    & > #{$detailsScope} {
        --summary-padding-s: #{$containerSummaryPaddingS};
        --summary-padding-e: #{$containerSummaryPaddingE};
        --content-padding-s: #{$containerContentPaddingS};
        --content-padding-e: #{$containerContentPaddingE};
    }
    & > #{$detailsScope}:is(.caret-left) {
        --summary-padding-s: #{$containerLeftSummaryPaddingS};
        --summary-padding-e: #{$containerLeftSummaryPaddingE};
        --content-padding-s: #{$containerLeftContentPaddingS};
        --content-padding-e: #{$containerLeftContentPaddingE};
    }
}

@media all and (max-width: $mediaBreakpoint) {
    .details-container {
        &.details-container__rounded {
            border-radius: calc(#{$circleSmallSize} / 2 + #{$detailsPaddingY});
        }
    }
}

/**/

/* TEMAS DE COLOR */
@each $theme-name, $theme-colors in $colorThemes {
    @if map-get($theme-colors, containerBackground) {
        .details-container.theme-#{$theme-name} {
            background-color: #{map-get($theme-colors, containerBackground)};
            border-color: #{map-get($theme-colors, borderColor)};

            details {
                border-bottom-color: #{map-get($theme-colors, borderColor)};

                @include caretColor(
                    map-get($theme-colors, caretBackground),
                    map-get($theme-colors, caret)
                );
            }
        }
    }
}

/** 
 *  LADNDING
 *  @summary Estilos para las páginas langing de algunos productos o servicios.
 *  @see www.argentina.gob.ar/vacaciones.
 */

/** 
 *  Configuración de variables por defecto
 */
@mixin landingDefault() {
    --figure-width: 1.15rem;
    --figure-text-gap: 10px;
    --figure-color: inherit;
    --figure-font-size: 1.5em;
    --summary-font-size: 1em;
}

.details-landing {
    // Elimino/oculto las etiquetas de párrafo vacías y los br.
    br,
    p:empty {
        display: none;
        height: 0px;
        overflow: hidden;
    }
    // Redefino details
    // Vista default
    details {
        @include landingDefault();
    }
    // Vista media
    &#{&}-md > details {
        --figure-width: 1.5rem;
        --figure-font-size: 1.75em;
        --summary-font-size: 1.15rem;
    }
    // Vista grande
    &#{&}-lg > details {
        --figure-width: 1.75rem;
        --figure-text-gap: 15px;
        --figure-font-size: 2em;
        --summary-font-size: 1.2rem;
        /* Global componente */
        --summary-padding-t: 15px;
        --summary-padding-b: 15px;
    }

    // definición para los íconos
    summary:has(i.fa-2x),
    summary:has(.figure) {
        font-size: var(--summary-font-size);
        gap: var(--figure-text-gap);
        color: var(--arg-secundario);
    }

    summary:has(i.fa-2x) i,
    summary .figure {
        flex: 0 0 calc(var(--figure-width) * 2 + var(--figure-text-gap));
        text-align: center;
        background: transparent;
        font-size: var(--figure-font-size);
        color: var(--figure-color);
    }

    summary .figure {
        letter-spacing: -0.25pt;
        font-weight: 700;
        font-style: normal;
        line-height: var(--summary-line-height);
    }
}

@media (max-width: 768px) {
    .details-landing {
        &#{&}-md > details,
        &#{&}-lg > details {
            @include landingDefault();
            /* Global componente */
            --summary-padding-t: #{$summaryPaddingT};
            --summary-padding-b: #{$summaryPaddingB};
        }
    }
}
