// Editor-specific styles for the accordion item block

.wp-block-vitalisite-fse-accordion-item {
  &.vitalisite-accordion-item {
    padding: var(--wp--preset--spacing--30) 0;

    summary {
      cursor: pointer;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--wp--preset--spacing--20) 0;
      list-style: none;
      color: var(--wp--preset--color--ink);

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

      &::after {
        content: "";
        display: inline-block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B3D91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        transition: transform 0.3s ease;
      }
    }

    &[open] summary {
      color: var(--wp--preset--color--primary);

      &::after {
        transform: rotate(180deg);
      }
    }

    p {
      margin: 0;
    }
  }
}
