.c-event-item {
  display: flex;
  gap: var(--spacing-8);
  position: relative;
  &.input {
    padding-block: var(--spacing-6);
    padding-inline: 28px var(--spacing-8);
    gap: 0;
    align-items: center;
    .age {
      width: 48px;
    }
    .item-content {
      border-left: 1px solid var(--color-border-base-middle);
      padding-left: var(--spacing-6);
      position: static;
    }
    .drug-handle {
      position: absolute;
      left: var(--spacing-2);
      top: 50%;
      transform: translateY(-50%);
      .icon {
        fill: var(--color-text-base-disabled);
        width: 20px;
        height: 20px;
      }
    }
    .delete-item {
      position: absolute;
      right: -2px;
      top: -2px;
    }
  }
  .age {
    width: 40px;
    font-size: var(--font-size-6);
    line-height: var(--line-height-2);
    color: var(--color-text-base-middle);
  }
  .item-content {
    flex: 1;
    display: grid;
    gap: var(--spacing-2);
    position: relative;
  }
  .event-text {
    display: grid;
    gap: var(--spacing-1);
  }
  .event-title {
    line-height: var(--line-height-3);
    font-size: var(--font-size-6);
    color: var(--color-text-base-high);
    font-weight: 400;
  }
  .event-detail {
    line-height: var(--line-height-3);
    font-size: var(--font-size-3);
    color: var(--color-text-base-low);
  }
}
.c-user-event-item {
  display: flex;
  gap: var(--spacing-8);
  position: relative;
  &.event-type-2,
  &.event-type-7,
  &.event-type-8 {
    &.list {
      .item-content {
        &:after {
          border: none;
          left: -4px;
          top: 7px;
          box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.25),
            0 0 0 4px #fff;
        }
      }
    }
  }
  &.event-type-1,
  &.event-type-3,
  &.event-type-4,
  &.event-type-5,
  &.event-type-6 {
    &.list {
      .item-content {
        &:after {
          background: var(--yellow-5);
        }
      }
    }
  }
  &.list {
    .item-content {
      padding-bottom: var(--spacing-16);
      padding-left: var(--spacing-8);
      &:before {
        content: "";
        position: absolute;
        left: -1px;
        top: 4px;
        bottom: -4px;
        width: 1px;
        background: var(--yellow-5);
      }
      &:after {
        content: "";
        position: absolute;
        left: -7px;
        top: 4px;
        width: 8px;
        height: 8px;
        background: var(--color-surface-primary);
        border-radius: var(--radius-round);
        border: 3px solid #fff;
        box-sizing: content-box;
      }
    }
  }
  .history-age {
    width: 36px;
    font-size: var(--font-size-5);
    line-height: var(--line-height-3);
    color: var(--color-text-base-low);
  }
  .item-content {
    flex: 1;
    display: grid;
    gap: var(--spacing-2);
    position: relative;
  }
  .event-text {
    display: grid;
    gap: var(--spacing-1);
  }
  .event-title {
    line-height: var(--line-height-3);
    font-size: var(--font-size-6);
    color: var(--color-text-base-high);
    font-weight: 400;
  }
  .event-detail {
    line-height: var(--line-height-3);
    font-size: var(--font-size-3);
    color: var(--color-text-base-low);
  }
}