@use "../utilities/icons";
@use "../utilities/mixins";

/**
 * @file _accordion.scss
 * @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
 * @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
 * @date 16.12.2024
 * @modified 30.07.2025
 * @@VERSION@@ 
 * @brief Styles für die Accordion-Komponente.
 *
 * Diese Datei enthält die CSS-Regeln, um die Accordion-Komponente
 * visuell darzustellen. Sie definiert das Grundaussehen,
 * Zuständ (:hover, :focus)
 */

@use "sass:map";

.kern-accordion {
  @include mixins.normalize;
  border-radius: var(--kern-metric-border-radius-none, 0px);
  border-top: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);
  border-bottom: var(--kern-metric-border-width-light, 1px) solid var(--kern-color-layout-border, #A5AAC3);

  + .kern-accordion {
    margin-top: calc(var(--kern-metric-border-width-light) * -1);
  }

  &[open] {
    > summary {
      &::after {
        -webkit-mask: map.get(icons.$icons, "arrow-up");
        mask: map.get(icons.$icons, "arrow-up");
        background-color: var(--kern-color-action-default, #1A3DA5);
        @include mixins.forced-colors-style;
      }
    }
  }  

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--kern-metric-space-small, 8px);
    flex: 1 0 0;
    padding: var(--kern-metric-space-default, 16px) var(--kern-metric-space-x-small, 4px);

    // remove default icon
    list-style-type: none;
    &::-webkit-details-marker,
    &::marker  {
      display: none 
    }

    &::after {
      content: '';
      width: var(--kern-metric-dimension-default, 24px);
      min-width: var(--kern-metric-dimension-default, 24px);
      height: var(--kern-metric-dimension-default, 24px);
      -webkit-mask: map.get(icons.$icons, "arrow-down");
      mask: map.get(icons.$icons, "arrow-down");
      mask-size: cover;
      mask-repeat: no-repeat;
      background-color: var(--kern-color-action-default, #1A3DA5);
      @include mixins.forced-colors-style;
    }

    &:hover {
      background: var(--kern-color-action-state-indicator-tint-hover-opacity);
      cursor: pointer;
    }

    &:not([tabindex="-1"]) {
      &:focus-visible {
        position: relative;
        z-index: 1;
        outline-color: transparent;
        box-shadow: 0 0 0 2px var(--kern-color-action-on-default),
          0 0 0 4px var(--kern-color-action-focus-border-inside),
          0 0 0 6px var(--kern-color-action-focus-border-outside);
        @include mixins.forced-colors-focus;
      }
    }

    .kern-title {
      color: var(--kern-color-action-default, #1A3DA5);
      flex: 1;
      overflow-wrap: break-word
    }
  }

  &__body {
    padding: var(--kern-metric-space-none, 0px) var(--kern-metric-space-x-small, 4px) var(--kern-metric-space-large, 24px) var(--kern-metric-space-x-small, 4px);
  }
}