.collapsible {
  box-shadow: 0 4px 4px rgba(0, 0, 0, .15);
  border: 1px solid $gray5;
  border-radius: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
  &-header {
    display: flex;
    align-items: center;
    &-is-open {
      background-color: #F1F7FD;
      border-bottom: 1px solid $gray5;
    }
    display: flex;
    flex-direction:row;
    padding:15px;
    cursor: pointer;
    &-toggle {
      margin-left:auto;
      display:inline-block;
      margin-right: 15px;
    }
    &-content{
      display:inline-block;
    }
    &:hover &-controls{
      visibility:inherit;
    }
    &-controls{
      margin-left: auto;
      visibility:hidden;
    }
  }
  &-content {
    padding: 20px;
    &-is-hidden{
      display:none;
    }
  }
}