.ds-section-control {
  border-bottom: var(--ds-border-rule);
  font-family: var(--ds-type-system-serif);
  font-size: var(--ds-type-scale-1);
  line-height: var(--ds-type-leading-lower);
  margin: 0;
  padding: 0 0 1rem 0;
  width: 100%;
  > summary {
    color: var(--ds-color-london-5);
    cursor: pointer;
    display: flex;
    font-family: var(--ds-type-system-sans-lining);
    font-size: var(--ds-type-scale-1);
    font-weight: 700;
    line-height: var(--ds-type-leading-lower);
    padding: 1rem 0 0 0;
    position: relative;
    transition: color var(--ds-interactions-transition);
    width: 100%;
    &::-webkit-details-marker {
      display: none;
    }
    &:hover {
      color: var(--ds-color-chicago-30);
    }
    &:focus {
      outline: solid transparent;
      span {
        box-shadow: inset 0 0 0 0.125rem var(--ds-color-hong-kong-55);
      }
    }
    &:active {
      color: var(--ds-color-chicago-45);
      span {
        box-shadow: none;
      }
    }
    &::after {
      align-self: center;
      background-image: url('eds://common/static/images/icons/navigation-control--chevron.svg');
      background-position: 0 0;
      background-repeat: no-repeat;
      background-size: 2rem;
      content: '';
      height: 2rem;
      position: absolute;
      right: var(--ds-grid-gap);
      top: 0.75rem;
      transition: transform var(--ds-interactions-transition);
      width: 2rem;
    }
  }
  &.ds-section-control--inverse {
    background-color: var(--ds-color-london-100);
    margin-bottom: 1rem;
    padding-left: 0.75rem;
    > summary {
      background-color: var(--ds-color-london-100);
    }
  }
}

.ds-section-control[open] {
  padding-bottom: 2rem;
  > summary {
    color: var(--ds-color-economist-red);
    padding-bottom: 1rem;
    &:focus {
      span {
        box-shadow: none;
      }
    }
    &::after {
      transform: scaleY(-1);
    }
  }
}

/* TODO remove for Edge 76 (polyfill for Edge 12 - 18) */
.ds-section-control__content--closed {
  display: none;
}