.accordion-root {
  margin-block: var(--space-6);

  .accordion-item {
    padding: 0;
    border-radius: var(--radius-5);
    border: 1px solid var(--gray-5);
    margin: 0 0 var(--space-3) 0;
    background-color: var(--gray-1);

    &:last-child {
      margin-bottom: 0;
    }

    h3 {
      margin: 0;
    }

    button[data-type='accordion-trigger'] {
      width: 100%;
      padding: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-radius: calc(var(--radius-5) - 1px);
      background-color: var(--gray-2);
      font-weight: 500;
      font-size: var(--font-size-3);
      border: none;
      text-align: left;

      &[data-state='open'] {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        background-color: var(--gray-1);
      }

      &:hover {
        span:has(svg) {
          border-color: var(--gray-8);
        }
      }

      span:has(svg) {
        flex-shrink: 0;
        width: calc(20px * var(--scaling));
        height: calc(20px * var(--scaling));
        display: inline-flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--space-1);
        border: 1px solid var(--gray-6);
        background-color: var(--gray-2);

        svg {
          transition: transform 0.2s ease-out;
        }
      }

      &[data-state='open'] {
        span:has(svg) {
          svg {
            transform: rotate(90deg);
          }
        }
      }
    }
  }

  .accordion-content {
    padding: 0 var(--space-3) var(--space-3);
    margin: 0 var(--space-2) var(--space-2);
    border-radius: 0px 0px var(--radius-3) var(--radius-3);
    border-bottom: 1px solid var(--gray-3);
    position: relative;
    background: linear-gradient(180deg, transparent 3.75%, var(--gray-2) 100%);
  }
}
