@use '../../token/scss' as *;

@mixin trailing {
  .cck-trailing {
    background-color: $base-surface-2;
    display: flex;
    justify-content: center;
    align-items: center;
    font: $text-base-font-medium;
    color: $text-dark-tertiary;
    gap: $spacing-4;
    padding: 0 $spacing-7;
    cursor: default;
    user-select: none;

    &--clickable {
      cursor: pointer;
      transition: background-color 100ms;

      &:active {
        background-color: $base-fill-1;
      }

      &:hover:not(:active) {
        background-color: $base-fill-2;
      }
    }
  }
}