/*  collapse 2 */

*, *::before, *::after {
  box-sizing: border-box;
}


main {
  padding: 1.25rem;
  background-color: rgba(256,256,256,1);
  
  a {
    text-align: center;
    display: block;
    margin-top: 2em;
    color: #333;
    &:hover {
      color: #666;
    }
  }
}

// commented lines will add height transition, at the cost of some unwanted limitation (height, ellipsis)
details.accordion {
  border: solid 2px #f5f5f5;
  transition: all 0.3s ease-in-out;
  // max-height: 4em;
  // overflow: hidden;  
  & + & {
    margin-top: 0.25rem;
  }  
  &:hover {
    background-color: #f5f5f5;
  }

  summary.accordion__title {
    list-style-type: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    color: #555555;
    padding: 0.875rem 2.5rem 0.875rem 0.875rem;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M23.024 11.263l-7.024 7.023-7.022-7.023-3.091 3.090 8.569 8.569c0.413 0.413 0.961 0.64 1.545 0.64s1.133-0.228 1.545-0.64l8.569-8.569-3.091-3.090z' fill='%23555555'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem top 0.625rem;
    background-size: 1.5rem;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    &::marker,
    &::-webkit-details-marker {
      display: none;
    }
  }

  .accordion__content {
    padding: 0 1rem 1rem 1rem;
    p {
      margin: 0;      
    }
    p + p {
      margin-top: 0.5em;
    }
  }

  &[open] {
    background-color: #ebebeb;
    border-color: #ebebeb;
    // max-height: 50em;
    
    summary.accordion__title {
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.976 22.025l7.024-7.023 7.022 7.023 3.091-3.090-8.568-8.568c-0.413-0.412-0.961-0.64-1.545-0.64s-1.133 0.228-1.545 0.64l-8.569 8.569 3.091 3.090z' fill='%23555555'/%3e%3c/svg%3e");
    }
  }
}