@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing' as spacing;
@use '@mezzanine-ui/system/radius' as radius;
@use '@mezzanine-ui/system/typography';
@use '@mezzanine-ui/system/transition' as transition;
@use '@mezzanine-ui/system/effect' as effect;
@use '../button/utils' as btn-utils;
@use './accordion' as *;

.#{$prefix} {
  background-color: palette.semantic-variable('background', neutral-ghost);
  border-radius: radius.variable(base);
  display: grid;
  outline: 1px solid palette.semantic-variable('border', neutral-faint);
  position: relative;
  transition: transition.standard(box-shadow, fast);
  width: 100%;

  &--main {
    gap: calc(spacing.semantic-variable(gap, comfort) - spacing.semantic-variable(padding, vertical, comfort));

    .#{$prefix}__title {
      &__mainPart {
        padding: spacing.semantic-variable(padding, vertical, comfort)
          spacing.semantic-variable(padding, horizontal, spacious);
      }
    }

    .#{$prefix}__content {
      padding: 0
        spacing.semantic-variable(padding, horizontal, spacious)
        spacing.semantic-variable(padding, vertical, comfort);
    }
  }

  &--sub {
    gap: calc(spacing.semantic-variable(gap, comfort) - spacing.semantic-variable(padding, vertical, base));

    .#{$prefix}__title {
      &__mainPart {
        padding: spacing.semantic-variable(padding, vertical, base)
          spacing.semantic-variable(padding, horizontal, spacious);
      }
    }

    .#{$prefix}__content {
      padding: 0
        spacing.semantic-variable(padding, horizontal, spacious)
        spacing.semantic-variable(padding, vertical, base);
    }
  }

  &--disabled {
    background-color: palette.semantic-variable('background', neutral-subtle);
  }

  &:has(.#{$prefix}__title__mainPart:focus-visible) {
    box-shadow: effect.variable(focus, primary);
  }
}

.#{$prefix}__title {
  align-items: center;
  border-radius: radius.variable(base);
  box-sizing: border-box;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  outline: none;
  width: 100%;
  color: palette.semantic-variable(text, neutral-solid);

  @include typography.semantic-variable(label-primary-highlight);

  &--disabled {
    pointer-events: none;
    color: palette.semantic-variable(text, neutral-light);
  }

  &__mainPart {
    @include btn-utils.reset();

    align-items: center;
    border-radius: radius.variable(base);
    display: flex;
    flex: 1 1;
    gap: spacing.semantic-variable(gap, calm);
    justify-content: flex-start;
    transition: transition.standard(color, fast);
    width: 100%;

    &:hover {
      color: palette.semantic-variable(icon, neutral-solid);

      .#{$prefix}__title__icon {
        color: palette.semantic-variable(icon, neutral-solid);
      }
    }
  }

  &__actions {
    position: absolute;
    right: spacing.semantic-variable(padding, horizontal, spacious);

    .mzn-button {
      min-width: unset;
    }
  }

  &__icon {
    color: palette.semantic-variable(icon, neutral-light);

    &--expanded {
      transform: rotate(-90deg);
      color: palette.semantic-variable(icon, neutral-solid);
    }

    &--disabled {
      pointer-events: none;
    }
  }
}

.#{$prefix}__content {
  border-bottom: 0;
  box-sizing: border-box;
  color: palette.semantic-variable(text, neutral-strong);
  display: grid;
  height: auto;
  max-width: spacing.semantic-variable(size, container, broad);
  min-height: 0;
  transition: transition.standard(opacity, fast);
  width: 100%;

  @include typography.semantic-variable(body);
}

.#{$groupPrefix} {
  display: grid;
  gap: spacing.semantic-variable(gap, calm);
}