.root {
  border-top: 1px solid var(--gray-5);
  border-bottom: 1px solid var(--gray-5);
  padding: 16px 0;
  margin: -1px 0 0 0;

  &[data-is-first-item='true'] {
    border-top: none;
  }

  &[data-is-last-item='true'] {
    border-bottom: none;
  }

  & .name {
    color: var(--brand);
    background: rgba(29, 30, 35, 0.07);
    border-radius: 3px;
    padding: 0.3em 0.625em;
  }

  & .typeString {
    color: var(--gray-2);
    background: none;
    padding: 0;
    margin-left: 2px;
  }

  & .requiredFlag {
    color: var(--danger-d1);
    margin-left: 4px;
  }

  & .title,
  & .description {
    color: var(--gray-2);
    margin: 8px 0 0 0;
  }

  & .toggleButton {
    border: 1px solid red;
    border: none;
    color: var(--brand);
    background: none;
    display: flex;
    align-items: center;
    margin: 8px 0 0 0;
    padding: 0;

    & .toggleIcon {
      position: relative;
      top: 1px;
      width: 16px;
      height: 16px;
      margin-right: 8px;
      transition: transform 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;

      & svg {
        & [fill] {
          fill: var(--brand);
        }
        & [stroke] {
          stroke: var(--brand);
        }
      }

      &[data-is-collapsed='false'] {
        transform: rotate(-180deg);
      }
    }

    &:hover {
      cursor: pointer;
    }
  }

  & .propertiesContainer {
    margin: 8px 0 0 8px;
    padding-left: 16px;
    border-left: 1px solid var(--gray-5);
  }
}