<commit_before>@import '../../variables';

$expandable-box-max-width: 516px;
$expandable-box-margin-vertical-mobile: 32px;
$expandable-box-margin-vertical-desktop: 48px;
$expandable-box-margin-horizontal: 8px;
$expandable-box-padding-mobile: 16px;
$expandable-box-padding-desktop: 24px;

.expandable-box {
  background-color: $color-bg-box;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  max-width: $expandable-box-max-width;
  margin: $expandable-box-margin-vertical-mobile $expandable-box-margin-horizontal;

  @include tablet-up {
    margin-top: $expandable-box-margin-vertical-desktop;
    margin-bottom: $expandable-box-margin-vertical-desktop;
  }
}

@media (min-width: #{$expandable-box-max-width + 2 * $expandable-box-margin-horizontal}) {
  .expandable-box {
    margin-left: auto;
    margin-right: auto;
  }
}

.expandable-box__header {
  display: flex;
  flex-direction: row;
  padding: $expandable-box-padding-mobile;
  cursor: pointer;

  // prevent blue focus-flash on Android browsers
  -webkit-tap-highlight-color: transparent;

  &:hover {
    background-color: $color-bg-box-hover;
  }

  &:focus,
  &:active {
    background-color: $color-bg-box-focus;
  }

  @include tablet-up {
    padding: $expandable-box-padding-desktop;
  }
}

.expandable-box__expand-icon {
  flex: 0 0 auto;
  align-self: center;
  height: 17px;
  padding-left: 16px;
  margin-left: auto;  // if there's only an icon it'll position itself on the right side of the container with this trick
}

.expandable-box__body {
  display: none;
}

.expandable-box__content {
  padding: 0 $expandable-box-padding-mobile $expandable-box-padding-mobile;
  margin: 0;
  font: 16px/1.5 $font-light;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.5px;
  color: $color-text-default;

  // prevent inner elements of creating a bigger gap between header and content
  // and prevent last element creating a larger bottom border
  > p {
    margin-bottom: 16px;
    line-height: $default-line-height-ratio;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  > ul {
    // @extend used here to apply the DRY principle while coping with ezxml's missing classes for html elements
    // tip: always be careful with @extend
    @extend .text-list;
    @extend .text-list--unordered;

    padding: 0;

    &:last-of-type {
      margin-bottom: 0;
    }

    li::before {
      top: 9px;

      @include tablet-up {
        top: 11px; // font size is bigger
      }
    }
  }

  > ol {
    // @extend used here to apply the DRY principle while coping with ezxml's missing classes for html elements
    // tip: always be careful with @extend
    @extend .text-list;
    @extend .text-list--ordered;

    padding: 0;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  > h4 {
    margin: 16px 0 8px;
    font-family: $font-medium;
    line-height: $default-line-height-ratio;
    letter-spacing: .5px;
  }

  @include tablet-up {
    padding: 0 $expandable-box-padding-desktop $expandable-box-padding-desktop;
    font-size: 18px;
  }

  @include breakLongWords();
}

// Prevent hover-state on the header when the box is expaned
.expandable-box--expanded {
  .expandable-box__header {
    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
    }
  }
}

// Expandable can also be not expandable. Hides the expand icon if it's not already removed on render
.expandable-box--always-open {
  .expandable-box__body {
    display: block;
  }

  .expandable-box__header {
    cursor: default;

    &:hover,
    &:focus,
    &:active {
      background-color: $color-bg-box;
    }
  }

  .expandable-box__expand-icon {
    display: none;
  }
}

// Take up the whole width of the parent container
.expandable-box--fullwidth {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
<commit_msg>different header-padding when not expandable<commit_after>@import '../../variables';

$expandable-box-max-width: 516px;
$expandable-box-margin-vertical-mobile: 32px;
$expandable-box-margin-vertical-desktop: 48px;
$expandable-box-margin-horizontal: 8px;
$expandable-box-padding-mobile: 16px;
$expandable-box-padding-desktop: 24px;

.expandable-box {
  background-color: $color-bg-box;
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  max-width: $expandable-box-max-width;
  margin: $expandable-box-margin-vertical-mobile $expandable-box-margin-horizontal;

  @include tablet-up {
    margin-top: $expandable-box-margin-vertical-desktop;
    margin-bottom: $expandable-box-margin-vertical-desktop;
  }
}

@media (min-width: #{$expandable-box-max-width + 2 * $expandable-box-margin-horizontal}) {
  .expandable-box {
    margin-left: auto;
    margin-right: auto;
  }
}

.expandable-box__header {
  display: flex;
  flex-direction: row;
  padding: $expandable-box-padding-mobile;
  cursor: pointer;

  // prevent blue focus-flash on Android browsers
  -webkit-tap-highlight-color: transparent;

  &:hover {
    background-color: $color-bg-box-hover;
  }

  &:focus,
  &:active {
    background-color: $color-bg-box-focus;
  }

  @include tablet-up {
    padding: $expandable-box-padding-desktop;
  }
}

.expandable-box__expand-icon {
  flex: 0 0 auto;
  align-self: center;
  height: 17px;
  padding-left: 16px;
  margin-left: auto;  // if there's only an icon it'll position itself on the right side of the container with this trick
}

.expandable-box__body {
  display: none;
}

.expandable-box__content {
  padding: 0 $expandable-box-padding-mobile $expandable-box-padding-mobile;
  margin: 0;
  font: 16px/1.5 $font-light;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0.5px;
  color: $color-text-default;

  // prevent inner elements of creating a bigger gap between header and content
  // and prevent last element creating a larger bottom border
  > p {
    margin-bottom: 16px;
    line-height: $default-line-height-ratio;

    &:first-child {
      margin-top: 0;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  > ul {
    // @extend used here to apply the DRY principle while coping with ezxml's missing classes for html elements
    // tip: always be careful with @extend
    @extend .text-list;
    @extend .text-list--unordered;

    padding: 0;

    &:last-of-type {
      margin-bottom: 0;
    }

    li::before {
      top: 9px;

      @include tablet-up {
        top: 11px; // font size is bigger
      }
    }
  }

  > ol {
    // @extend used here to apply the DRY principle while coping with ezxml's missing classes for html elements
    // tip: always be careful with @extend
    @extend .text-list;
    @extend .text-list--ordered;

    padding: 0;

    &:last-of-type {
      margin-bottom: 0;
    }
  }

  > h4 {
    margin: 16px 0 8px;
    font-family: $font-medium;
    line-height: $default-line-height-ratio;
    letter-spacing: .5px;
  }

  @include tablet-up {
    padding: 0 $expandable-box-padding-desktop $expandable-box-padding-desktop;
    font-size: 18px;
  }

  @include breakLongWords();
}

// Prevent hover-state on the header when the box is expaned
.expandable-box--expanded {
  .expandable-box__header {
    &:hover,
    &:active,
    &:focus {
      background-color: transparent;
    }
  }
}

// Expandable can also be not expandable. Hides the expand icon if it's not already removed on render
.expandable-box--always-open {
  .expandable-box__body {
    display: block;
  }

  .expandable-box__header {
    cursor: default;

    padding-bottom: 8px;

    @include desktop {
      padding-bottom: 12px;
    }

    &:hover,
    &:focus,
    &:active {
      background-color: $color-bg-box;
    }
  }

  .expandable-box__expand-icon {
    display: none;
  }
}

// Take up the whole width of the parent container
.expandable-box--fullwidth {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

{'fraction_non_alphanumeric': 0.12972562903021873, 'fraction_numerical': 0.013781767606524213, 'mean_word_length': 2.8249516441005804, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '137920', 'n_tokens_mistral': 2867, 'n_tokens_neox': 2680, 'n_words': 652}