/*
 * bhAccordeonItem
 *
 * Angepasst an dieses Projekt: es gibt hier keine CSS-Variablen (weder in
 * fileadmin/css/design.css noch in EXT:bh/Resources/Public/Css/defaults.css),
 * darum sind alle Werte fest eingetragen. Farben aus der Projektpalette:
 * Text #282428, Trennlinie #d5d5d5, Akzent #45b1bd.
 *
 * Überschreibt die Basis-Styles aus EXT:bh/Resources/Public/Css/defaults.css
 * (.bh-accordion-toggler-inner padding, .bh-accordion-element-inner overflow).
 * Wird nach defaults.css geladen.
 *
 * Markup: EXT:bh/Resources/Private/Partials/AccordeonItem.html
 * .bhAccordeonItem > .bh-accordion-toggler > .bh-accordion-toggler-inner
 *                  > .bh-accordion-element > .bh-accordion-element-inner
 * Aktiv-Klasse "bh-accordion-active" wird von base.js auf den Toggler gesetzt.
 */

.bhAccordeonItem {
    margin-bottom: 0;
    border-top: 1px solid #d5d5d5;
    border-bottom: 1px solid #d5d5d5;
}

/* doppelte Trennlinie zwischen zwei Items vermeiden
   (.bhe-container-dropzone liegt im Backend-Editing zwischen den Elementen) */
.bhAccordeonItem + .bhAccordeonItem,
.bhAccordeonItem + .bhe-container-dropzone + .bhAccordeonItem {
    border-top: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- toggler */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bhAccordeonItem .bh-accordion-toggler {
    cursor: pointer;
}

.bhAccordeonItem .bh-accordion-toggler .bh-bodytext,
.bhAccordeonItem .bh-accordion-toggler .bh-bodytext > * {
    font-weight: bold;
    color: inherit;
}

.bhAccordeonItem .bh-accordion-toggler-inner {
    position: relative;
    padding: 15px 45px 15px 0;
    color: #282428;
    transition: color 0.3s ease;
}

.bhAccordeonItem .bh-accordion-toggler:hover .bh-accordion-toggler-inner,
.bhAccordeonItem .bh-accordion-active .bh-accordion-toggler-inner {
    color: #45b1bd;
}

/* Icons: bakehouse-iconset, \e90f = plus, \e910 = minus
   (EXT:bh/Resources/Public/Css/iconset-frontend.css, im Projekt eingebunden) */
.bhAccordeonItem .bh-accordion-toggler-inner::before,
.bhAccordeonItem .bh-accordion-toggler-inner::after {
    content: "\e90f";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(0deg) scale(1);
    font-family: "bakehouse-iconset" !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    speak: never;
    font-feature-settings: "liga";
    font-variant-ligatures: discretionary-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition:
        transform 0.3s linear,
        opacity 0.3s linear;
}

.bhAccordeonItem .bh-accordion-toggler-inner::after {
    content: "\e910";
    transform: translateY(-50%) rotate(-90deg) scale(0.5);
    opacity: 0;
}

.bhAccordeonItem .bh-accordion-active .bh-accordion-toggler-inner::before {
    transform: translateY(-50%) rotate(-90deg) scale(0.5);
    opacity: 0;
}

.bhAccordeonItem .bh-accordion-active .bh-accordion-toggler-inner::after {
    transform: translateY(-50%) rotate(-180deg) scale(1);
    opacity: 1;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- content */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bhAccordeonItem .bh-accordion-element-inner {
    overflow: unset;
    padding: 0 0 25px;
}

.bhAccordeonItem .bh-accordion-element-inner > *:last-child {
    margin-bottom: 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- mobile */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body.bh-state-mobile .bhAccordeonItem .bh-accordion-toggler-inner {
    padding: 12px 35px 12px 0;
}

body.bh-state-mobile .bhAccordeonItem .bh-accordion-toggler-inner::before,
body.bh-state-mobile .bhAccordeonItem .bh-accordion-toggler-inner::after {
    font-size: 16px;
}

body.bh-state-mobile .bhAccordeonItem .bh-accordion-element-inner {
    padding: 0 0 20px;
}

@media (max-width: 767.98px) {
    .bhAccordeonItem .bh-accordion-toggler-inner {
        padding: 12px 35px 12px 0;
    }

    .bhAccordeonItem .bh-accordion-toggler-inner::before,
    .bhAccordeonItem .bh-accordion-toggler-inner::after {
        font-size: 16px;
    }

    .bhAccordeonItem .bh-accordion-element-inner {
        padding: 0 0 20px;
    }
}