.basic {
  background-color: color('primary-2');
  margin: auto;
  p, ul {
    max-width: 50em;
  }
  p a {
    color: color('primary-1');
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .toggleSwitch {
    @include typography-b-10();
  }

  @media #{$desktop} {
    max-width: 50em;
  }
}

.panel {
  @include typography-b-8();
  position: relative;
  border-bottom: 1px solid color('neutral-4');
  padding: ru(1) ru(.75);
  &:last-of-type {
    border-bottom: none;
  }

  .title {
    font-size: inherit;
    font-weight: typography-b-weight(true);
    padding-right: ru(1);
    flex-grow: 1;
  }
}

.header {
  display: flex;
  cursor: pointer;
  align-items: baseline;
}

.ordinal {
  position: absolute;
  font-weight: typography-b-weight(true);
  align-self: start;

  // IE 11 displays the ordinal very strangely. Just best to avoid.
  @media all and ( -ms-high-contrast: none ), ( -ms-high-contrast: active ) {
    display: none;
  }
}

.content, .title {
  padding-left: ru(1);
}

.content {
  overflow: hidden;
  height: auto;
  max-height: 0px;
  opacity: 0;
  transition: max-height 350ms ease-out,
              opacity 200ms;

  p:last-of-type {
    margin-bottom: 0;
  }
}

.toggleSwitch {
  width: 4em;
  text-align: right;
}

.content.content-open {
  max-height: 3000px;
  transition: max-height 1s ease-out,
              opacity 200ms ease-in;
  opacity: 1;
}