:host {
  --acc-background-color: inherit;
  --acc-border-color: #ccc;
  --acc-item-title-font-family: inherit;
  --acc-item-title-font-size: 1rem;
  --acc-item-title-font-weight: bold;
  --acc-item-title-background-color: #f8f9fa;
  --acc-item-title-hover-background-color: #e9ecef;
  --acc-item-title-padding: 1rem;
  --acc-item-title-arrow-color: #777;
  --acc-item-title-arrow-display: block;
  --acc-item-content-background-color: inherit;
  --acc-item-content-padding: 1rem;
}

.accordion {
  width: 100%;
  border: 1px solid var(--acc-border-color);
  margin: auto;
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--acc-background-color);
}


.accordion-item {
  border-bottom: 1px solid var(--acc-border-color);

  .item-title {
    font-size: var(--acc-item-title-font-size);
    font-weight: var(--acc-item-title-font-weight);
    font-family: var(--acc-item-title-font-family);
    padding: var(--acc-item-title-padding);
    cursor: pointer;
    transition: background 0.3s ease;
    background-color: var(--acc-item-title-background-color);


    &:hover {
      background: var(--acc-item-title-hover-background-color);
    }

    &::after {
      content: "";
      width: 1rem;
      height: 1rem;
      background-color: var(--acc-item-title-arrow-color);
      -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat center;
      mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") no-repeat center;
      background-size: contain;
      float: right;
      display: var(--acc-item-title-arrow-display);
      transition: transform 0.3s ease;
    }

    &::marker {
      display: none;
      content: "";
    }

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

  &[open] {
    summary::after {
      transform: rotate(-180deg);
      transition: transform 0.2s ease;

    }
  }

  .item-content {
    padding: var(--acc-item-content-padding);
    border-top: 1px solid var(--acc-border-color);
    background-color: var(--acc-item-content-background-color);
  }
}