/// ----------------------------------------------------------------------

/// Collapse

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@use 'transitions';
@use 'borders';
@use 'shadows';
@use 'states';
@use 'z-index';

/// -------------------
/// Collapse config
/// -------------------

$padding-x: spacing.$md !default;
$padding-y: spacing.$md !default;

/// -------------------
/// Collapse selectors
/// -------------------

.collapse {
  display: block;
}

/// -------------------
/// Collapse header
/// -------------------

.collapse__header {
  @include lib.resets-style;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  box-shadow: shadows.$one;
  border-radius: corners.$base;
  padding: $padding-y $padding-x;
  border: borders.$mid solid transparent;
  z-index: z-index.$default;
  cursor: pointer;

  &:active,
  &:focus {
    @include states.focus;
  }
}

/// -------------------
/// Collapse heading
/// -------------------

.collapse__heading.text {
  margin-bottom: 0;
}

/// -------------------
/// Collapse body
/// -------------------

.collapse__body {
  padding: $padding-y $padding-x;
  animation: fadeInTop 0.3s forwards ease;
  display: none;

  &--active {
    display: block;
  }

  & & {
    padding-right: 0;
  }
}
