.panel {
  background-color: #fff;
  border: 1px solid $colour-grey-light;

  img {
    display: block;
    max-width: 100%;
  }

  & + & {
    margin-top: 1em;
  }
}

.panel__head,
.panel__content,
.panel__foot {
  position: relative;
  padding: 1em;

  > *:first-child:not(.panel__action):not(.row) {
    margin-top: 0;
  }

  > *:last-child:not(.row) {
    margin-bottom: 0;
  }

  &--fat {
    padding: 1.5em;
  }

  &--short {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }

  &--tall {
    padding-top: 2em;
    padding-bottom: 2em;
  }
}

.panel__action {
  position: absolute;
  top: 50%;
  right: 1em;
  margin-top: -($panel-close-size / 2);

  + * {
    margin-top: 0;
  }
}

.panel__head {
  border-bottom: 1px solid $colour-grey-light;

  .is-collapsed & {
    border-bottom: 0;
  }
}

.panel__foot {
  border-top: 1px solid $colour-grey-light;
}

.panel--centered {
  text-align: center;

  img {
    margin: 0 auto;
  }
}

.panel,
.panel__head,
.panel__content,
.panel__foot {
  &--grey {
    background-color: $colour-grey-xlight;
    border-color: $colour-grey-lightmid;
  }

  &--blue {
    background-color: $colour-blue-light;
    border-color: $colour-blue-lightmid;
  }

  &--bright-blue {
    background-color: $colour-blue;
    border-color: $colour-blue-dark;
  }
}