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

/// Collapse

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

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'corners';
@use 'colours';
@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;
  margin: spacing.$sm 0;

  &:first-of-type {
    margin: 0 0 spacing.$sm 0;
  }
  
  &:last-of-type {
    margin: spacing.$sm 0 0 0;
  }
}

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

.collapse__header {
  @include lib.resets-style;
  background: colours.$ui-white;
  border: 1px solid colours.$ui-three;
  margin: 0;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 5px -2px colours.$ui-two;
  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 {
  background: colours.$ui-white;
  border-radius: corners.$base;
  border: 1px solid colours.$ui-three;
  margin: spacing.$sm 0;
  padding: $padding-y $padding-x;
  animation: fadeInTop 0.3s forwards ease;
  display: none;

  &--active {
    display: block;
  }

  & & {
    padding-right: 0;
  }
}
