// Name:            accordion
// Description:     Shows accordion component
//
// Component:       `c-accordion`
//
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-accordion {
  // Custom properties
  // ======================================================================
  
  --label-bg: var(--background-color);
  --label-active-bg: var(--background-color-gray);
  --label-hover-bg: var(--background-color-gray);
  --label-border: var(--divider-color);

  // ======================================================================

  border-top: 0;
  border-right: 1px;
  border-bottom: 1px;
  border-left: 1px;
  border-style: solid;
  border-color: var(--divider-color);

  @media (prefers-color-scheme: dark) {
    body[data-channel*="dossier"]:not([data-color-scheme*="light"]) &,
    body[data-actual-url="/signup/premium-products/"]:not(
        [data-color-scheme*="light"]
      )
      & {
      --label-bg: #{$approfondimento-gray-darker};
      --label-active-bg: #{$approfondimento-gray-darker};
      --label-hover-bg: #{$approfondimento-gray-darker};
    }
  }

  body[data-model*="approfondimento"] & {
    border: none;
  }

  &__label {
    border-top: 1px solid var(--label-border);
    background-color: var(--label-bg);

    label:first-of-type & {
      border: none;
    }

    &:hover {
      background-color: var(--label-hover-bg);
      transition: background-color 0.3s ease-in-out, border-top 0.3s ease-in-out;
    }
  }

  &__body {
    height: 0;
    overflow: hidden;
    opacity: 0;
  }

  input:checked {
    ~ .c-accordion__label {
      background-color: var(--label-active-bg);
      box-shadow: inset 0 4px 0 var(--theme-color);
      transition: background-color 0.3s ease-in-out, border-top 0.3s ease-in-out;

      body[data-model*="approfondimento"] & {
        box-shadow: none;
      }

      .o-icon {
        transform: rotate(180deg);
        transition: transform 0.3s ease-in-out;
      }
    }

    ~ .c-accordion__body {
      height: auto;
      padding: $padding-base;
      overflow: auto;
      opacity: 1;
      transition: height 0.3s ease-in-out, opacity 0.6s ease-in-out;
    }
  }

  // approfondimento custom values

  body[data-channel*="dossier"] &,
  body[data-actual-url="/signup/premium-products/"] & {
    --label-bg: #{$approfondimento-gray-lighter};
    --label-active-bg: #{$approfondimento-gray-lighter};
    --label-hover-bg: #{$approfondimento-gray-lighter};
  }

  body[data-color-scheme*="dark"][data-channel*="dossier"] &,
  body[data-color-scheme*="dark"][data-actual-url="/signup/premium-products/"]
    & {
    --label-bg: #{$approfondimento-gray-darker};
    --label-active-bg: #{$approfondimento-gray-darker};
    --label-hover-bg: #{$approfondimento-gray-darker};
  }
}