$min-width: 250px;
$vertical-title-padding: 25px;
$horizontal-title-padding: 10px 25px;
$vertical-body-padding: 0 25px 25px 25px;
$horizontal-body-padding: 10px 25px;
$horizontal-background: #F3F3F3;

.root{
  border-top: 1px solid $color-grey-2;
  &:last-child{
    margin-bottom: 0;
  }
  &.horizontal{
    border-top: none;
    background: $horizontal-background;
    flex: 0 1 auto;
    position: relative;
  }
}

.title{
  width: 100%;
  text-align: left;
  display: flex;
  padding: $vertical-title-padding;
  .horizontal &{
    background: $horizontal-background;
    padding: $horizontal-title-padding;
  }
}

.text {
  $color: $color-black;
  $font-family: $font-base;
  $font-size: 1;
  font-size: calc($font-size-small * $font-size);
  font-family: $font-family;
  color: $color;
  flex: 1 1 0%;
  padding-right: 10px;
}

.icon {
  vertical-align: middle;
}

.body{
  margin-top: -15px;
  padding: $vertical-body-padding;
  .horizontal &{
    background: $horizontal-background;
    position: absolute;
    z-index: 3;
    padding: $horizontal-body-padding;
    min-width: $min-width;
    box-sizing: border-box;
    border: 1px solid $color-grey-2;
    top: 100%;
    margin: 0;
    left: -1px;
  }
  &[hidden]{
    display: none;
  }
}

.horizontal{
  margin-right: 5px;
  &.expanded{
    outline: 1px solid $color-grey-2;
    .title:after{
      content: ' ';
      position: absolute;
      top: 100%;
      z-index: 4;
      height: 5px;
      background: $horizontal-background;
      left: 1px;
      right: 1px;
    }
  }
}