.list-underlined {
  @extend .list-unstyled;
  margin-bottom: 0;

  > li {
    border-bottom: 1px solid $dark;
    padding: 2px 0;
  }
}

.flex-space-left {
  margin-left: auto;
}

.flex-space-right {
  margin-right: auto;
}

.alert {
  border-width: 0;
  background: transparent;

  @each $color, $value in $theme-colors {
    &.alert-#{$color} {
      border-bottom: 2px solid theme-color-level($color, $alert-color-level);
      transition: background-color ease 200ms;

      &:hover {
        background-color: rgba(theme-color-level($color, $alert-bg-level), .5);
      }
    }
  }
}

.fold {
  overflow-y: hidden;
  overflow-x: hidden;

  transition: height 250ms ease;
  will-change: height;
  box-sizing: padding-box;
}

.flex {
  display: flex;
  align-items: center;

  > .text {
    margin-left: .2rem;
    margin-right: .2rem;
    display: inline-block;
    margin-bottom: 0;

    &:last-child, & + .text {
      margin-right: 0;
    }

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

.section {
  margin-bottom: 1rem;

  .section__title {
    @extend .alert;
    @extend .alert-dark;

    > * {
      font-size: medium;
    }

    @include direct-headings {
      @extend .flex;
      margin-bottom: 0;
    }

    font-size: medium;
    background: transparent;
    padding: .5rem .75rem;

    line-height: $btn-line-height;

    &:hover {
      background: none;
    }

    > .btn {
      margin-top: -.5rem;
      margin-bottom: -.5rem;
    }
  }
}

svg.svg-inline--fa {
  transform: rotate(360deg)
}

.btn-unstyled {
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  display: block;
}

.icon {
  padding: .5rem 0.75rem;
}