@import '../../scss/mixin';

.historyItem {
  @include btn();
  justify-content: space-between;
  border-right: 4px solid transparent;
  transition: all ease-in-out 350ms;
  outline-offset: 0;
  cursor: pointer;
  padding: 12px;

  @include bp(md) {
    padding: 12px 24px;
  }

  &:hover {
    background: var(--neutral-300);
  }

  &.active {
    background: var(--neutral-300);
    border-right: 4px solid var(--neutral-900);
  }
}

.user {
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  color: var(--neutral-700);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.remove {
  color: var(--neutral-700);

  svg {
    width: 16px;
    height: 16px;
    transition: transform ease-in-out 350ms;
  }

  &:hover {
    svg {
      transform: scale(1.05);
    }
  }
}