.c-details {
  margin-bottom: 1rem;

  &[open] {
    .c-details__icon {
      transform: rotate(180deg);
    }

    .c-details__summary {
      background-color: var(--bg-details-summary);  

      * {
        color: var(--color-neutral-white);
      }
    }
  }
}

.c-details__summary {
  background-color: var(--color-neutral-gray-04);
  color: var(--color-neutral-gray-70);
  cursor: pointer;
  padding: 20px 40px;
  position: relative;
  transition: background-color .15s ease-in;

  &:hover,
  &:focus {
    background-color: #e7e7e7;
  }

  &::-webkit-details-marker {
    display: none;
  }

  .c-details__icon {
    height: 16px;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    transform-origin: 50% 25%;
    transition: transform .15s ease-in;
    width: 28px;
  }

  * {
    color: var(--color-neutral-gray-70);
    display: inline-block;
    font-weight: 700;
    margin: 0;
  }
}

.c-details__content {
  padding: 1rem;
}