@use '~/styles/mixins' as *;

.grw-recent-changes-resize-button :global {
  line-height: normal;
  transform: translateY(-2px);

  .form-check-label::before {
    padding-left: 5px;
    content: 'L';
  }

  .form-check-input:checked + .form-check-label::before {
    padding-left: 5px;
    content: 'S';
  }
}

.list-group-item :global {
  font-size: 12px;

  .grw-recent-changes-skeleton-small {
    @include grw-skeleton-text($font-size:14px, $line-height:16px);
    max-width: 120px;
  }

  .grw-recent-changes-skeleton-h5 {
    @include grw-skeleton-h5;
    max-width: 120px;
  }

  .grw-recent-changes-skeleton-date {
    @include grw-skeleton-text($font-size:10px, $line-height:12px);
    width: 80px;
  }

  // For truncate-text
  .flex-grow-1 {
    min-width: 0;
  }

  .truncate-text {
    max-width: fit-content;
  }
}


.grw-recent-changes-item-lower :global {
  font-size: 12px;

  .material-symbols-outlined {
    font-size: 14px;
  }
  .grw-formatted-distance-date {
    font-size: 10px;
  }
}

// == Colors
.grw-former-link a {
  --bs-link-opacity: .5;

  &:global {
    &:hover {
      --bs-link-opacity: 1;
    }
  }
}

.grw-recent-changes-item-lower :global {
  color: var(--bs-gray-500);
}