@layer components {
  .activity-item {
    --activity-item-padding: var(--bulma-size-small);
    --activity-item-margin-bottom: var(--bulma-size-6);
    --activity-item-border-radius: var(--bulma-radius);
    --activity-item-background: var(--bulma-white);
    --activity-item-border-width: 2px;
    --activity-item-border-color: transparent;
    --activity-item-danger-color: var(--bulma-danger);
    --activity-item-white-color: var(--bulma-white);
    
    background-color: var(--activity-item-background);
    border-radius: var(--activity-item-border-radius);
    border: var(--activity-item-border-width) solid var(--activity-item-border-color);
    margin-block-end: var(--activity-item-margin-bottom);
    padding: var(--activity-item-padding);
    transition: all 0.2s ease;
  }

  .activity-item--remove {
    --activity-item-border-color: var(--activity-item-danger-color);
  }

  .activity-item.is-clickable:hover {
    transform: scale(1.02);
    opacity: 0.95;
  }

  .activity-item__content {
    display: flex;
    align-items: center;
  }

  .activity-item__icon {
    margin-inline-end: var(--bulma-size-normal);
    display: flex;
    align-items: center;
  }

  .activity-item__details {
    flex-grow: 1;
  }

  .activity-item__name {
    font-weight: var(--bulma-weight-semibold);
  }

  .activity-item__description {
    color: var(--activity-item-white-color);
    font-size: var(--bulma-size-7);
  }

  .activity-item--remove .activity-item__name {
    color: var(--activity-item-danger-color);
    font-weight: var(--bulma-weight-semibold);
  }

  .activity-item--remove .activity-item__icon {
    color: var(--activity-item-danger-color);
  }
}