.link {
  display: flex;
  align-items: center;

  padding: 0.75rem 1.5rem;
  gap: 0.5rem;
  width: 100%;

  border-left: 4px solid transparent;
  color: $action-text-color;
  white-space: nowrap;

  cursor: pointer;

  transition-property: color;
  transition-duration: $transition-time-action;

  &:hover {
    color: $ontime-color;
    background-color: $gray-1350;
  }

  &:active {
    background-color: $border-color-ondark;
  }

  &:focus {
    outline: 2px solid $blue-500;
    background-color: $gray-1350;
  }

  &.current {
    background-color: $gray-1300;
    border-left: 4px solid $action-text-color;
  }
}