// Stacking elements one of top of another
.stack,
.stack .toggle {
  @extend %stack;
  margin-top: 0;
  margin-bottom: 0;
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0;
  }

// This is in this way to allow for individual stack items
// Because if it was border-radius: $picnic-radius $picnic-radius 0 0;
// then they would all behave as last-child
.stack:first-child,
.stack:first-child .toggle {
  border-top-left-radius: $picnic-radius;
  border-top-right-radius: $picnic-radius;
  }

.stack:last-child,
.stack:last-child .toggle {
  border-bottom-left-radius: $picnic-radius;
  border-bottom-right-radius: $picnic-radius;
  }

// To avoid the double border of input and textarea
input,
textarea,
select {

  &.stack {
    transition: border-bottom 0 ease 0;
    border-bottom-width: 0;

    &:last-child {
      border-bottom-width: 1px;
      }

    &:focus + input,
    &:focus + textarea,
    &:focus + select {
      border-top-color: $picnic-primary;
      }
    }
  }