.container {
  border-radius: 4px;
  background-color: $color-plum-100;
  @include padding(8, (top, bottom));

  &.sticky {
    position: sticky;
    top: 1rem;
  }

  h3,
  a {
    @include type-size(100);
    color: $color-plum-700;
    line-height: 1.6;
  }
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include padding(16, (left, right));

  background: transparent;
  border: none;
  width: 100%;

  h3 {
    margin: 0;
    @media (max-width: $viewport-lg) {
      font-size: 1rem;
      line-height: 2rem;
    }
  }
}

.caret {
  background: none;
  border: none;
  box-shadow: none;
  position: relative;
  padding: 0;

  z-index: 1;
  cursor: pointer;
  top: 3px;

  background-color: $color-plum-200;
  border-radius: 50%;
  height: 24px;
  width: 24px;

  margin-bottom: spacer(4);

  @media (min-width: $viewport-lg) {
    display: none;
  }

  svg {
    fill: $color-plum-700;

    transform: rotate(-180deg);
    transition: transform 0.2s ease-in;
    transform-origin: center;

    position: absolute;
    top: 7px;
    left: 5px;

    transition: top 0.2s ease-in;
  }

  &[aria-expanded='true'] svg {
    top: 5px;
    transform: rotate(0deg);
    transition: top 0.2s ease-out;
    transform-origin: center;
    transition: transform 0.2s ease-out;
  }
}

.content {
  display: none;
  @media (min-width: $viewport-lg) {
    display: block;
  }
  &.opened {
    display: block;
  }
}
